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 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
Node.js实现数据推送
Apr 14 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
微信小程序自定义底部弹出框动画
Nov 18 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php合并js请求的例子
2013/11/01 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Saltstack快速入门简单汇总
2016/03/01 Python
婚假请假条怎么写
2014/04/10 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
七一慰问简报
2015/07/20 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技