基于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 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
JavaScript多种页面刷新方法小结
Apr 04 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php socket方式提交的post详解
2008/07/19 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python实现单词翻译功能
2017/06/06 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python多线程分块读取文件
2019/08/29 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
基于python 凸包问题的解决
2020/04/16 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python爬虫要用到的库总结
2020/07/28 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
某科技软件测试面试题
2013/05/19 面试题
大学生演讲稿范文
2014/01/11 职场文书
教学实习自我评价
2014/01/28 职场文书
推荐信模板
2014/05/09 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Python函数对象与闭包函数
2022/04/13 Python