基于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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JavaScript中DOM详解
Apr 13 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
Element Badge标记的使用方法
Jul 27 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获取新浪微博数据API实例
2013/11/12 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解js类型判断
2018/05/22 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python实现串口自动触发工作的示例
2019/07/02 Python
django用户登录验证的完整示例代码
2019/07/21 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python 模拟登陆163邮箱
2020/12/15 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
.net开发工程师面试题
2014/02/25 面试题
研究生自我鉴定范文
2013/10/30 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
学生会部长竞聘书
2014/03/31 职场文书
婚礼秀策划方案
2014/05/19 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
Hive日期格式转换方法总结
2022/06/25 数据库