現在網頁中需要翻頁的列表，好多都已經改為瀑布流了。所以這個思路還是特別重要的

HTML

Css

頁面

因為每個圖片的高度不一樣所以她的 top 和left 我們待會通過JS計算 動態生成

js部分 思路註釋

<script>
    // 1.獲取父容器的寬度 獲取子容器的寬度 算出一列放多少個，邊距
    // 2.通過計算盒子的高度，布局方法
    // 3.瀑布流啟動
    //獲取父容器
    let itemBox=document.getElementById(‘itembox‘)
    //父容器寬度
    let iBoxW=itemBox.offsetWidth;
    // 子容器和寬度
    let item=document.getElementsByClassName(‘item‘)
    let itemW=item[0].offsetWidth
    //列數
    const rowNum=Math.floor(iBoxW/itemW)
    //間距
    const distents=Math.floor((iBoxW-itemW*rowNum)/rowNum)

    // console.log(distents,rowNum)
    // 每個圖片的left=列數*（圖片大小+間距）
    //每個圖片的top值為當前高度最低的top
        //保存每列的高度、索引就是我們放的列數,值就是top
    let  arr=[]

    // 實現布局
    for (let i=0;i<item.length;i++){
        // 第一排top為0
        if (i<rowNum){
            item[i].style.left=i*(itemW+distents)+‘px‘;
            item[i].style.top=‘0px‘
            arr[i]=item[i].offsetHeight;
        }
        // 第二 三 四。。。。排
        else {
            let Minarr=MinArr(arr)
            item[i].style.left=Minarr.index*(itemW+distents)+‘px‘;
            item[i].style.top=Minarr.min+‘px‘
            console.log(item[i].offsetHeight,arr)
            //更新數組高度
            arr[Minarr.index]+=item[i].offsetHeight
        }
    }

    let json=[‘bl1.jpg‘,‘bl5.jpg‘,‘bl6.jpg‘,‘bl7.jpg‘,‘bl8.jpg‘,‘bl4.jpg‘,‘bl3.jpg‘,‘bl2.jpg‘,‘CJD2.jpg‘,‘CJD4.jpg‘,‘CJD1.jpg‘,‘CJD3.jpg‘]
   console.log(MinArr(arr),arr)
    //啟動瀑布流
       //滾動事件
    window.onscroll=function () {
       //瀏覽器可視高度
        let toH=window.innerHeight
        //瀏覽器滾動超出的高度
        let doH=window.pageYOffset
        let Minarr=MinArr(arr)

        //當這2個值+起來>最小列寬度時加載數據
        if (toH+doH>Minarr.min){
            for (let i=0;i<json.length;i++){
                //創建元素
                let div=document.createElement(‘div‘)
                div.className=‘item‘
                let img=document.createElement(‘img‘)
                img.src=‘images/‘+json[i]
                //設置TOP left
                // 每個圖片的left=列數*（圖片大小+間距）
                //每個圖片的top值為當前高度最低的top
                div.style.top=Minarr.min+‘px‘
                 div.style.left = Minarr.index*(itemW+distents)+‘px‘;
                //添加
                div.appendChild(img)
                itemBox.appendChild(div)
                //保存每列的高度、索引就是我們放的列數,值就是top
                arr[Minarr.index]+=div.offsetHeight
                // 重新排序
                Minarr=MinArr(arr)
            }

            //後期用AJAX 改變JSOn的值
        }
    }

    //最小高度和索引
    function MinArr(arr) {
        let mArr={}
        mArr.min=arr[0]
        mArr.index=0;
        for (let i=1;i<arr.length;i++){
            if (mArr.min>arr[i]){
                mArr.min=arr[i]
                mArr.index=i;
            }
        }
        return mArr
    }




</script>

疑問

document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

我開始用獲取body的高度時候始終都是0 原因是因為絕對定位不能將父容器撐開 產生了BFC 解決辦法。。。。還不知道 留個疑惑吧

JavaScript—瀑布流