8.6、实现一个瀑布流

完成基本步骤

1.判断一排能放下几个
     获取窗口的width
     获取盒子的width 
     num = window/box
2.根据第一排的高去放第二排
    从最小高度开始放  arr

api

var ww = $(window).width();
var box = $(".item").outerWidth();
var num = Math.floor(ww / box);
$("#app").css({width:num*box+"px"})

width -->content
outerWidth-->content,padding,border
改变css样式
$(element).css({attr:value})

判断滚动条是否到达底部

$(window).scroll(function(){
var scrollTop =  $(window).scrollTop(); //获取滚动条距离顶部的高
var availHeight =  $(window).height(); //获取可视区域的高
var dw = $(document).height();  //获取内容区域的高
console.log(dw)
/* 滚动条的高度+可视区域的height = 内容区域的高度 */
})
function isReachBottom(){
}

获取元素距离窗口的距离

获取元素距离窗口的距离
left:  $(element).offset().left;
top:  $(element).offset().top;

var w =  $(".item").offset().left;
var h =  $(".item").offset().top;
console.log($(".item").eq(1));  /* eq 第几个元素的 */

第一步和第二步

 /* 1.得到一排能放置几个元素 */
var ww = $(window).width();
var box =  $(".item").outerWidth();
var num = Math.floor(ww/box);
/* 2.定义一个数组获取第一排元素的height */
var arr = [];
$(".item").each((index,value)=>{
      if(index<num){
         console.log(value)
         var height =  $(value).outerHeight();
         arr.push(height)
       }
    })
console.log(arr);

根据height放置元素

 3.将元素放置在最小高度的位置  同时将数组重置 */
var minHeight = Math.min(...arr);
var index = arr.indexOf(minHeight);
var offsetLeft =  $(".item").eq(index).offset().left;
$(value).css({position:"absolute",left:offsetLeft,top:minHeight});
arr[index] = minHeight+$(value).outerHeight();

结合实现瀑布流

css
*{
            padding: 0;
            margin: 0;
        }
        .item img{
            width:240px;
            padding: 5px;
            vertical-align: bottom;
        }
        .item{
            float: left;
            border: 1px solid #eee;
        }

<div id="app">
        <div class="item"><img src="images/01.jpg" alt=""></div>
        <div class="item"><img src="images/02.jpg" alt=""></div>
        <div class="item"><img src="images/03.jpg" alt=""></div>
        <div class="item"><img src="images/04.jpg" alt=""></div>
        <div class="item"><img src="images/05.jpg" alt=""></div>
        <div class="item"><img src="images/06.jpg" alt=""></div>
        <div class="item"><img src="images/07.jpg" alt=""></div>
        <div class="item"><img src="images/08.jpg" alt=""></div>
        <div class="item"><img src="images/09.jpg" alt=""></div>
        <div class="item"><img src="images/10.jpg" alt=""></div>
        <div class="item"><img src="images/11.jpg" alt=""></div>
        <div class="item"><img src="images/12.jpg" alt=""></div>
    </div>

<script>
        /* 一排能放置几张图片 */
         var ww = $(window).width();
         var box = $(".item").outerWidth();
         var num = Math.floor(ww/box);
         var arr = [];
         /* 将第一排的盖度放在一个数组中arr */
         $(".item").each((index,value)=>{
             if(index<num){
                 var height = $(value).outerHeight();
                 arr.push(height)
             }else{
                 /* 从盖度最小的地方放置图片 */
                 var minHeight = Math.min(...arr);
                 var index = arr.indexOf(minHeight);
                 var offsetLeft = $(".item").eq(index).offset().left;
                 $(value).css({position:"absolute",left:offsetLeft,top:minHeight})
                 arr[index] = minHeight+$(value).outerHeight();
             }
         })
    </script>