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写的一个DIV 弹出网页对话框
Aug 14 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
微信小程序rich-text富文本用法实例分析
May 20 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 daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP解决中文乱码
2017/04/28 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
如何在PHP中读写文件
2020/09/07 PHP
DOM精简教程
2006/10/03 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
vue 2.0封装model组件的方法
2017/08/03 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
项目合作计划书
2014/01/09 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
南京青奥会口号
2014/06/12 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书