基于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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
javascript canvas时钟模拟器
Jul 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
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python如何实现内容写在图片上
2018/03/23 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
会计演讲稿范文
2014/05/23 职场文书
党性分析材料格式
2014/12/19 职场文书
电影雨中的树观后感
2015/06/15 职场文书
会议主持词结束语
2015/07/03 职场文书
关爱空巢老人感想
2015/08/11 职场文书