欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery.lazyload+masonry改良图片瀑布流代码

程序员文章站 2022-04-19 10:41:34
实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈)/** * 自动刷新 * @type {*|jquery|htmlelement} */var $con...

实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈)

/**
 * 自动刷新
 * @type {*|jquery|htmlelement}
 */
var $container = $('#main');
$container.imagesloaded( function(){
  $container.masonry({
    itemselector : '.item',
    columnwidth:205,
    gutterwidth:10,
    isanimated: true
  });
});
var pre_href;
//滚动
$(window).scroll(function(){
  // 当滚动到最底部以上100像素时, 加载新内容
  if ($(document).height() - $(this).scrolltop() - $(this).height()<100) {
    ajax_load_data();
  }
});
 
function ajax_load_data(){
  var href = $('#page-nav').find('.nextprev').attr('href');
  if(href && href != pre_href){
    console.log('href = '+href);
    pre_href = href;
 
    $.ajax({
      url:href,//获取元素列表的地址
      data:{'act':'ajax_wap_index'},
      datatype:'json',
      type:'post',
      beforesend:function(){
        show_loading_body();
      },
      complete:function(){
        show_loading_body();
      },
      success:function(data){
        if(data.status != undefined && data.status == 'ok'){
          if(data.html){
            var $boxes = $( data.html );
            $container.append( $boxes ).masonry("appended", $boxes, true);//追加元素
            $container.imagesloaded(function () {
              $container.masonry();
            });//加载完图片后,会实现自动重新排列。【这里是重点】
          }
 
          if(data.str_pages){
            $('#page-nav').html(data.str_pages);//设置下一个分页的地址。【可以自己补充】
          }
        }
      }
    });
  }
}