基于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解密入门 最终变量劫持
Jun 25 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
JavaScript继承与聚合实例详解
Jan 22 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
详解vue高级特性
2020/06/09 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
python中pop()函数的语法与实例
2020/12/01 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
采购主管工作职责
2013/12/12 职场文书
社区先进事迹材料
2014/05/19 职场文书
周末问候语大全
2015/11/10 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书