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


Posted in Javascript onJune 20, 2014

实现方法如下:(这里只发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);//设置下一个分页的地址。【可以自己补充】
          }
        }
      }
    });
  }
}
Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
Node.js实现简单聊天服务器
Jun 20 #Javascript
SuperSlide2实现图片滚动特效
Jun 20 #Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 #Javascript
js常用数组操作方法简明总结
Jun 20 #Javascript
JS实现闪动的title消息提醒效果
Jun 20 #Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 #Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 #Javascript
You might like
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
Python中datetime模块参考手册
2017/01/13 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python如何实现数据的线性拟合
2019/07/19 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python代码如何注释
2020/06/01 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
应届生财务会计求职信
2013/11/05 职场文书
大学生应聘推荐信范文
2013/11/19 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
自书遗嘱范文
2015/08/07 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL