jQuery Masonry无限滚动不会停止

时间:2012-02-12 09:31:11

标签: jquery jquery-masonry

我正在使用jquery砌体无限滚动脚本。分页下一页重复加载。我怎么能阻止它?当我每次重复添加分页内容时滚动页面,而不是显示“不再加载内容”之类的消息。

$(function(){
    // alert($('.pin_item').length);

    var $alpha = $('#alpha');        
    $alpha.masonry({
      itemSelector: '.pin_item',
      columnWidth: 230,
      //isAnimated: true
    });

    $alpha.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.pin_item',     // selector for all items you'll retrieve
      bufferPx     : 50,
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $alpha.masonry( 'appended', $newElems, true ); 
        });
    });
});

3 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。这是您的404页面无法找到的问题。大多数CMS将在页面用完后返回最后一个有效的分页内容。当“下一页”链接调用不存在的页面时,您需要将后端配置为抛出404。

要确认这是您的问题,请尝试更改网址中的数字。即如果您有5页,第五页是www.example.com/category/page?id=5,请访问www.example.com/category/page?id=99。它应该填充与您上一个有效页面相同的内容(在本例中为第5页)

您使用的是哪个CMS?

答案 1 :(得分:0)

这是我在我的代码中使用的一个简单示例.. 我设置全局变量,并根据我发现我的数据是否已完全加载..如果我获取数据空,则表示所有内容都已加载,我将停止加载变量设置为1。

假设DOM是d形式..

<div class="results_list">
  <ul id="divid">
    <li class="results">data...</li>
    <li class="results">data...</li>
  </ul>
</div>
<script>
  $(document).ready(function () {
    window.load_start = 0;
    window.load_stop = 0;
    $(".results_list").scroll(function(){
      if(window.load_stop != 1) {
        if($('.results').hasClass('last')) {
            $('.results').removeClass('last');
        }
        window.load_start += 40; 
        //40.. to load items from 40.. if u hav loaded 40 items a time before..
        $.ajax({
            url:"/url.php",
            data:"action=params+"&lazyload=1&start_load="+window.load_start,
            method:"GET",
            success: function(data) {
                data = $.trim(data);
                //data is in the form of html.. <li class="results">hi load item from - start_load i.e., passed in params by ajax.. above </li>
                if(data == undefined || data == '') {
                    window.load_stop = 1;
                    return false;
                }
                $('#divid').append(data);
            }
        });
      }
    });
  });
</script>
//u can add a condition to send ajax call(load items) only on scrolling down the div.

答案 2 :(得分:-2)

Masonry无限滚动脚本正在加载根目录中的页面文件夹中的页面。 因此,如果您只想加载一页,只需删除此文件夹中的其他html页面即可。 文件夹名称:页面。 页面名称:2.html,3.html,4.html,....

所以,删除页面(3.html,4.html,如果你发现更多只是删除它们),只需保留页面(2.html)。

享受。