jQuery实现瀑布流布局

zlf1914 2020-06-10 原文

<!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>