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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
javascript 清空form表单中某种元素的值
Dec 26 Javascript
php+js实现倒计时功能
Jun 02 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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数组是否为空的代码
2011/09/08 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python中的getopt函数使用详解
2015/07/28 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Python单链表原理与实现方法详解
2020/02/22 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
学校四群教育实施方案
2014/06/12 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
合作合同协议书范本
2015/01/27 职场文书
社区服务活动报告
2015/02/05 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Python实现socket库网络通信套接字
2021/06/04 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL