欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery开发中瀑布流布局实现方法

程序员文章站 2022-04-18 13:41:39
html 代码如下:  

      &...

html

代码如下:


 <p id="main">
         <p class="box">
             <p class="pic">
                 <img src="images/0.jpg" alt="">
             </p>
         </p>
         <p class="box">
             <p class="pic">
                 <img src="images/1.jpg" alt="">
             </p>
         </p>
         <p class="box">
             <p class="pic">
                 <img src="images/2.jpg" alt="">
             </p>
         </p>
         <p class="box">
             <p class="pic">
                 <img src="images/3.jpg" alt="">
             </p>
         </p>
         <p class="box">
             <p class="pic">
                 <img src="images/4.jpg" alt="">
             </p>
         </p>
         <p class="box">
             <p class="pic">
                 <img src="images/2.jpg" alt="">
             </p>
         </p>
 </p>

 

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=$("<p>").addclass("box").appendto($("#main"));
                 //jquery支持连缀,隐式迭代;
                 var opic=$("<p>").addclass('pic').appendto($(obox));
                 $("<img>").attr("src","images/"+$(value).attr("src")).appendto(opic);
             });
             waterfall();
         }
     })
 });
 //流式布局主函数;
 function waterfall () {
     var $boxs=$("#main>p");
     //获取#main元素下的直接子元素p.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>p").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;
 }

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