首页 > 编程 > JavaScript > 正文

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

2019-11-20 14:26:24
字体:
来源:转载
供稿:网友

实现方法如下:(这里只发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);//设置下一个分页的地址。【可以自己补充】          }        }      }    });  }}

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表