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 Window及document对象详细整理
Jan 12 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
js Calender控件使用详解
Jan 05 Javascript
九种原生js动画效果
Nov 11 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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
dedecms模版制作使用方法
2007/04/03 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
利用python如何处理nc数据详解
2018/05/23 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Java程序员面试90题
2013/10/19 面试题
中专自荐信
2013/10/13 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
装修协议书范本
2014/04/21 职场文书
优秀求职信
2014/05/29 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
创先争优个人总结
2015/03/04 职场文书
行政介绍信范文
2015/05/04 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL