jQuery實現瀑布流佈局

周龍飛發表於2020-06-10
jQuery

核心思路：用陣列存取每一列li的高度，每次新增li都往最小高度那一列上新增，每新增一個li就把它的高度加給最小高度

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            ul {
                margin: 0 auto;
                position: relative;
            }

            ul li {
                width: 300px;
                position: absolute;
            }

            ul li img {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <ul></ul>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $.ajax({//請求資料
            url: 'http://rap2.taobao.org:38080/app/mock/257210/json',//請求地址
            dataType: 'JSON'//請求資料型別
        }).done(a => {//請求成功
            a = a.data
            const teep = 10,//每個li之間的間隙
                width = 300,//每個li的寬度，存起來方便以後使用
                cols = Math.floor(($(document).innerWidth()) / (width + teep)),//計算圖片列數
                list = $('ul')[0].children,//動態獲取ul下的子元素
                hh = [] //存取每一列的高度
            let num = 0//存取圖片載入完成數量
            $('ul').css('width', cols * (width + teep))//設定ul寬度
            $(a).each((index, item) => { //遍歷資料
                $('<li>').html(`<img src="${item.src}">`).appendTo('ul')//建立li
            })
            $(list).find('img').on('load', function() {//圖片載入完成
                num++//每載入完成一張圖片就加1
                if(num==$(list).length){//圖片全部載入完成，開始設定每個li的座標
                    $(list).each((index,item)=>{//遍歷li
                        if (index < cols) {//設定第一行li的座標
                            $(list).eq(index).css({
                                left: (width + teep) * index,
                                top: teep
                            })
                            hh.push($(list).eq(index).height() + teep*2)//新增第一行每一列li的高度到陣列hh
                        } else {//設定其它li的座標
                            let minHeight = Math.min(...hh)//獲取最小高度
                            let minIndex = hh.indexOf(minHeight)//獲取最小高度的索引
                            $(list).eq(index).css({
                                left: (width + teep) * minIndex,
                                top: minHeight
                            })
                            hh[minIndex]+=$(list).eq(index).height()+teep//更新最小高度
                        }
                    })
                }
            })
        })
    </script>
</html>

 

相關文章