数据流布局DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{padding:0; margin:0;}
            .box{margin:30px; position: relative;}
            .item{width:300px; padding:5px; border:1px solid #e0e0e0; position: absolute; transition: 0.5s; margin:10px;}
            .item img{width:300px; display: inline-block;}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
            <div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
        </div>
        <script type="text/javascript">
            $(function(){
                init();
                $(window).on("resize",function(){
                    init();
                })
                //outwidth padding+margin+border的宽度
                function init(){
                    var boxWidth=$('.item').outerWidth(true);
                    var cols=parseInt($(window).width()/boxWidth);
                    var heightArr=[];
                    for(var i=0; i<cols;i++){
                        heightArr.push(0);
                    }
                    
                    $(".item").each(function(index,item){
                        var idx=0;
                        var minBoxHeight=heightArr[0];
                        for(var i=0;i<heightArr.length;i++){
                            if(heightArr[i]<minBoxHeight){
                                minBoxHeight=heightArr[i];
                                idx=i;
                                console.log(i)
                            }
                        }
                        $(item).css({
                            left:boxWidth*idx,
                            top:minBoxHeight
                        })
                        heightArr[idx]+=$(item).outerHeight(true);
                    })
                }
            })
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容