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 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php权重计算方法代码分享
2014/01/09 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP中常用的魔术方法
2017/04/28 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
js密码强度检测
2016/01/07 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python实现图片转字符画的示例代码
2017/08/21 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python实现多进程通信实例分析
2019/09/01 Python
体育专业自荐书
2014/05/29 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
vue如何清除浏览器历史栈
2022/05/25 Vue.js