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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
JS 跳转页面延迟2种方法
Mar 29 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
js中new一个对象的过程
Feb 20 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python3 shelve模块的详解
2017/07/08 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
linux面试相关问题
2012/08/11 面试题
python re模块和正则表达式
2021/03/24 Python
体育专业个人的求职信范文
2013/09/21 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
工作推荐信范文
2014/05/10 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
三八节活动主持词
2015/07/04 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python