标签: infinite-scroll

我在bootstrap中构建了一个大表,大约5,000行x 10列,我需要使用JavaScript快速过滤表中的特定属性.该表具有id列和属性列,即

id | attr | ...
---------------
2  |  X   | ...
3  |  Y   | ...
4  |  X   | ...

为了快速完成过滤过程,我构建了一个哈希表,将表映射回列ids.例如,我有一个映射:

getRowIds["X"] = [2,4]

用户可以在搜索框中输入属性"X",然后哈希表查找包含"X"的相应行(在本例中为2和4),然后通过映射操作调用以下函数:

this.hideRow = function(id) {
    document.getElementById(id).style.display="none"
}

this.showRow = function(id) {
    document.getElementById(id).style.display=""
}

此过程仍然很慢,因为允许用户选择多个属性(例如X,Y).

是否有更快的方法来隐藏行？

如果我能以某种方式从DOM分离表,进行更改,然后重新附加,会更快吗？我如何在javascript中执行此操作？

还有其他更有效/更智能的过滤方法吗？

谢谢 :)

我正在使用backbone.js,我想知道是否有更简洁的解决方案来创建模型/集合的"无限滚动"情况,而不是我一直在寻找的模块(有几个可能是jquery,可能更多其他图书馆).

有些搜索几乎没有出现,所以我想在尝试用骨干构建自己的解决方案之前我会问,如果我应该在骨干集合之外构建一些东西,或者是否有人尝试过类似的东西.

只是似乎没有工作... :-(已经看到更多的投诉,但我找不到答案.

问题: 无限滚动有效,但不是手动触发.当我点击链接时,没有任何反应.萤火虫给

无限滚动

我的代码:

    <?php echo ('<ul id="infinite">'); ?>
<?php 
$wp_query = new WP_Query();
$wp_query->query('paged='.$paged.'&cat=5&showposts=3&meta_key=video_video&orderby=meta_value&order=ASC'  . $post->ID);
while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<?php if ( get_post_meta($post->ID, 'video_video', true) ) : ?>
    <li class="video"><?php $home = array("h" => 290, "w" => 380, "zc" => 1, "q" =>100);
            //echo get('video_video');
            echo ('With: ');
            echo get('participant_first_name');
            echo ('&nbsp;');
            echo get('participant_last_name');
            echo ('</li>');?>

<?php endif;?>


<?php endwhile;?>

<?php if (get_post_meta($post->ID, 'video_video', true) ) { ?>
    <?php if ($wp_query->max_num_pages > 1) : ?> …

我正在使用伟大的无限滚动插件 - http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

但是在较大的屏幕分辨率上,没有足够的帖子来显示滚动条,因此无限滚动永远不会被触发.想知道如果这些方法没有大量的初始帖子.

猜测某种if语句来检查浏览器高度等.但是如果它返回true,我如何触发无限滚动.

有任何想法吗

谢谢

本

我一直在两个专栏网站上工作,当你滚动时:列A上升,列B下降.我实现了一个无限滚动,但我想知道的是:是否有可能克隆/追加一列到另一列,例如在一定的滚动长度:

一旦滚出视图:

• A列框将移动到B列的末尾
• B列框将移动到A列的末尾

技术上仍然是无限的,但是从一列到另一列循环框 - 将一个放到另一个然后再返回.

这种方法是不好的,或者,在每列上使用无限滚动更好吗？什么让我沮丧,因为我是JS和jQuery的新手,是逻辑......以及实现这一目标的最佳方法是什么.

*图像只是例如,盒子的数量可以更高,例如每列10个.

我的代码到目前为止:http://jsfiddle.net/djsbaker/vqUq7/1/

我目前尝试克隆/追加:

      var ele = document.getElementById("box");
      var arr = jQuery.makeArray(ele);
      var data = (ele)[0];

      $(window).scroll(function() {

        if ( $(window).scrollTop() >= 1000) {

          $(data).clone().appendTo('body');

        } else {

        }

      });

我遇到以下代码的一些奇怪的行为.

    function linkFunc(scope, element, attribute) {
        var page = angular.element($window);

        page.bind('scroll', function() {

            var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
            var body = document.body, html = document.documentElement;
            var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
            var windowBottom = windowHeight + window.pageYOffset;

            if (windowBottom >= docHeight) {
                scope.$apply(attribute.myDirective);
            }
        });
    }

以上是一段代码,用于检测页面底部是否到达,如果到达它将调用任何绑定的函数 myDirective

主要问题是大多数时候延迟加载工作,并myDirective成功调用.但是有些时候延迟加载不起作用,我无法重现这个bug.

我尝试了不同的屏幕大小,不同的浏览器,但似乎这个bug只是随机发生的.

也许有人之前发生过这种情况,可以指出方向吗？

编辑:

更多信息

经过一些实验,我能够重现这个bug.

基本上,当在浏览器中的百分比缩放< 100 %,window.pageY返回一个十进制值,该值是不准确的略微引起windowBottom由处于关闭状态0.1,以0.9

例如.

            console.log(windowBottom); // 1646.7747712336175
            console.log(docHeight); …

我正在为网站使用无限滚动jquery插件(https://github.com/paulirish/infinite-scroll)

一切都很好,除了我的页面是一个搜索所以......发生的是:

1)你进入页面,浏览器自动定位你并返回你周围的项目列表(例如条形图)...需要无限滚动以避免对此列表进行分页.一切都有效,直到这里...除了我可以到达"无限页末尾"并且插件从滚动中"解除绑定"的事实.

2)现在....当你想在输入文本中手动插入一个地址时,你可以自由地做...你写下你的地址,然后按下输入...和ajax(没有页面刷新).. .i会寻找lat/lon,找到地址,更改无限滚动的导航链接....而且,我觉得愚蠢,但我无法想出一种方法来"重新激活"或"重新绑定"活动的插件......所以我的"新搜索结果"没有一个新的"无限卷轴"实例......

(页面"拆分"正确并正确返回json尝试更改"page = NUM​​BER")

这是控制台中发生的事情:

["math:", 0, 468]
jquery.infinitescroll.min.js:20["heading into ajax", 
Array[2]
    0 : "/ajax/getCoworkings/?page="
    1 : "&latitude=52.5234051&longitude=13.4113999&distance=12"
    length : 2
    __proto__ : Array[0]
]
jquery.infinitescroll.min.js:20["Using JSON via $.ajax() method"]
jquery.infinitescroll.min.js:20["Error", "end"]
jquery.infinitescroll.min.js:20["Binding", "unbind"]

在"unbind"之后,我无法再绑定它,因此在我的下一个搜索结果中有无限滚动........

我有mongodb和NodeJs.连接通过mongoosejs完成.
开发ajax无限滚动的最佳方法是什么？我应该使用限制和抵消吗？

我有一个网站,我实现无限滚动:当用户到达页面的末尾时,进行AJAX调用并将新内容附加到页面底部.但是,这意味着搜索爬虫无法获得第一个"分页符"之后的所有内容.例如,我有一个页面列出了所有带有"infographic"标签的项目.实际上有几十个这样的项目,但是爬虫只能看到前10个,因为其他项目是根据内容相对于浏览器窗口的位置加载的.由于抓取工具没有浏览器窗口,因此根本不会加载新项目.

那么,让搜索爬虫访问具有无限滚动的网页的完整内容,同时还允许用户享受无限滚动和缺乏分页的正确方法是什么？

我有一个非常流畅的GridView.我在无限滚动的上下文中使用网格,每当滚动接近底部时,通过REST API加载更多项目.这里没问题.

但是我希望能够在网格底部显示一个加载指示器.此窗口小部件应跨越网格中的所有列,但仍应是可滚动内容的一部分.

我是Flutter的新手并且失去了如何实现这一目标.

我的(工作)GridView实例化如下:

return new GridView.builder(
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _COLUMN_COUNT),
  controller: widget.scrollController,
  itemCount: widget.items.length,
  itemBuilder: (BuildContext context, int index) {
    return new _ItemView(item: widget.items[index]);
  },
);