jQuery实现瀑布流布局


Posted in Javascript onDecember 12, 2014

HTML

 <div id="main">

         <div class="box">

             <div class="pic">

                 <img src="images/0.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/1.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

 </div>

CSS

 * {

     margin: 0;

     padding: 0;

 }

 #main {

     position: relative;

 }

 .box {

     padding:15px 0 0 15px;

     float:left;

 }

 .pic {

     padding: 10px;

     border: 1px solid #ccc;

     border-radius: 5px;

     box-shadow: 0px 0px 5px #ccc;

     img {

         width:165px;

         height:auto;

     }

 }

JavaScript

 $(window).on("load",function () {

     waterfall();

     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

     //模拟json数据;

     $(window).on("scroll",function () {

         if(checkScrollSlide){

             $.each(dataInt.data,function (key,value) {

                 var oBox=$("<div>").addClass("box").appendTo($("#main"));

                 //jQuery支持连缀,隐式迭代;

                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));

                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);

             });

             waterfall();

         }

     })

 });

 //流式布局主函数;

 function waterfall () {

     var $boxs=$("#main>div");

     //获取#main元素下的直接子元素div.box;

     //获取每一列的宽度;

     var w=$boxs.eq(0).outerWidth();

     //outerWidth()获取包含padding和border在内的宽度;

     //var w=$boxs.eq(0).width();

     //width()只能获取给元素定义的宽度;

     var cols=Math.floor($(window).width()/w);

     //获取多少列;

     $("#main").width(w*cols).css("margin","0 auto");

     //设置#main元素的宽度和居中样式;

     var hArr=[];

     //每一列高度的集合;

     $boxs.each(function (index,value) {

     //遍历每一个box元素;

     //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;

         var h=$boxs.eq(index).outerHeight();

         //每一个box元素的高,

         if (index<cols) {

             hArr[index]=h;

             //确定每列第一个元素的高度;

         } else{

             var minH=Math.min.apply(null,hArr);

             //得出列高数组中的最小高度;

             var minHIndex=$.inArray(minH,hArr);

             //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;

             //console.log(value);

             //此时的value是第一行之后的所有的box元素的DOM对象!;

             $(value).css({

             //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;

                 "position":"absolute",

                 "top":minH+"px",

                 "left":minHIndex*w+"px"

             });

             hArr[minHIndex]+=$boxs.eq(index).outerHeight();

             //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;

         };

     });

     // console.log(hArr);

 };

 function checkScrollSlide () {

     var $lastBox=$("#main>div").last();

     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

     var scrollTop=$(window).scrollTop();

     var documentH=$(window).height();

     return (lastBoxDis<scrollTop+documentH)?true:false;

 }

详细解释清仔细参考注释吧,我就不单独再拉出来写了。

Javascript 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 #Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 #Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 #Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 #Javascript
You might like
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php远程下载类分享
2016/04/13 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
PHP实现百度人脸识别
2019/05/06 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Python实现把数字转换成中文
2015/06/29 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
查看Django和flask版本的方法
2018/05/14 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
绩效考核实施方案
2014/03/18 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
党员民主生活会材料
2014/12/15 职场文书
个人廉政承诺书
2015/04/28 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python