实现瀑布流

原理：
获取图片宽度

瀑布流处理

1. 获取图片的列数 （可视宽度 / 图片宽度）
2. 创建高度数组
3. 遍历所有图片进行定位处理
4. 获取当前元素的高度、高度数组最小的高度、高度数组最小的高度的索引

        .waterfall {
            position: relative;
        }
        .waterfall .spread-item {
            width: 44%;
            padding: 0.2rem 0px;
            padding-left:4%;
        }


function shop(){
    $.ajax({
        type: "POST",
        url: '',
        dataType: "json",
        data:{},
        success:function(res){
            var html_arr = "";
            for(let i = 0; i<res.data.list.length; i++){
                    html_arr += `<div class="spread-item">
                                    <div style="border: 1px solid #f4f4f4;background: #ffff; padding-bottom: 10px;box-shadow: 0px 0px 6px #e5e5e5;">
                                        <div class="spread-img">
                                            <img src="${res.data.list[i].thumb}" alt="">
                                        </div>
                                        <div class="spread-title">${res.data.list[i].title}</div>
                                        <div class="author-praise">
                                            <div class="author">
                                                <div class="user-img">
                                                    <img style="height:100%" src="${res.data.list[i].thumb}" alt="">
                                                </div>
                                               <div class="user-name">小巴穿搭日记</div>
                                            </div>
                                            <div class="praise">${res.data.list[i].total}</div>
                                        </div>
                                    </div>
                                </div>`
                $('.waterfall').append(html_arr)
            }

            $(function () {
                // 获取图片的宽度(200px)
                let imgWidth = $('.spread-item').outerWidth(); // 200

                waterfallHandler();

                // 瀑布流处理
                function waterfallHandler() {
                    // 获取图片的列数
                    let column = parseInt($(window).width() / imgWidth);
                
                    // 高度数组
                    let heightArr = [];
                    for(let i=0; i<column; i++) {
                        heightArr[i] = 0;
                    }
                
                    // 遍历所有图片进行定位处理
                    $.each($('.spread-item'), function (index, item) {
                        // 当前元素的高度
                        let itemHeight = $(item).outerHeight();
                        // 高度数组最小的高度
                        let minHeight = Math.min(...heightArr);
                        // 高度数组最小的高度的索引
                        let minIndex = heightArr.indexOf(minHeight);
                        $(item).css({
                            position: 'absolute',
                            top: minHeight + 6 + 'px',
                            left: minIndex * imgWidth + 'px'
                        });
                    
                        heightArr[minIndex] += itemHeight;
                    });
                }
            
                // 窗口大小改变
                $(window).resize(function () {
                    waterfallHandler();
                });
            });
        },
        error:function(err){
            console.log(err)
        }
    })
}
shop()