基于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实现的分页函数
Dec 22 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
详解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 shell命令合并图片的代码
2011/06/23 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
JS实现li标签的删除
2019/04/12 Javascript
layui的select联动实现代码
2019/09/28 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python中bisect模块用法实例
2014/09/25 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
电力培训心得体会
2014/09/02 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年基建工作总结
2014/12/12 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫