基于jquery实现瀑布流布局


Posted in Javascript onJune 28, 2020

本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下

效果图:

基于jquery实现瀑布流布局

具体代码:

使用jquery-1.8.3.min.js,waterfall.js代码如下:

$( window ).load( function(e){
 waterfall();
 var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]};
 $(window).scroll(function(){
  if( checkscrollside() ){
   $.each( dataInt.data, function(index,value){
    var $oPin = $('<div>').addClass('pin').appendTo( $("#main") );
    var $oBox = $('<div>').addClass('box').appendTo( $oPin );
    $('<img>').attr('src','./images/' + $(value).attr('src')).appendTo( $oBox );
   });
   waterfall();
  }
 });
 function waterfall(){
  var $aPin = $( "#main>div" );
  var iPinW = $aPin.eq(0).outerWidth();
  var num = Math.floor( $(window).width() / iPinW );
  $( "#main" ).css({
   'width' : iPinW * num,
   'margin' : '0 auto'
  });

  var pinHArr = [];
  $aPin.each(function( index, value ){
   var pinH = $aPin.eq( index ).height();
   if( index < num ){
    pinHArr[ index ] = pinH;
   }else{
    var minH = Math.min.apply( null, pinHArr );
    var minHIndex = $.inArray( minH, pinHArr );
    $( value ).css({
     'position': 'absolute',
     'top': minH + 15,
     'left': $aPin.eq( minHIndex ).position().left
    });
    pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;
   }
  });
 }
 function checkscrollside(){
  var $aPin = $("#main>div");
  var lastPinH = $aPin.last().get(0).offsetTop + Math.floor( $aPin.last().height()/2);
  var scrollTop = $( window ).scrollTop();
  var documentH = $( document ).height();
  return (lastPinH < scrollTop + documentH ) ? true : false;
 }
});

希望本文所述对大家学习有所帮助,谢谢大家的阅读。

Javascript 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 #Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
几道Java和数据库的面试题
2013/05/30 面试题
《蒲公英》教学反思
2014/02/28 职场文书
党支部四风整改方案
2014/10/25 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
公司欠款证明
2015/06/24 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技