数据流布局DEMO

作者: _前端码农_ | 来源:发表于2019-01-07 11:26 被阅读0次

数据流布局DEMO
我的布局实例
iOS 中利用相对布局和绝对布局,对Table中的文字自适应调整
flex布局及常用属性
day06-css3-demo
布局demo
ios 电商demo（实现各种常见动画效果和页面布局）
瀑布流布局_木桶布局
Flutter开发实战：页面布局详解
iOS布莱恩军刀-布局约束

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

数据流布局DEMO
我的布局实例
下拉菜单 demo BFC 两栏布局 demo 负边距两栏布局 demo 负边距等边布局 demo 圣杯三栏布...
iOS 中利用相对布局和绝对布局,对Table中的文字自适应调整
demo地址: dealText 相对布局与绝对布局 1.相对布局: 2.绝对布局: 本demo中自适应高度的...
flex布局及常用属性
flex 布局 demo 圣杯响应式布局
day06-css3-demo
伸缩布局demo：
布局demo
1、单栏布局 (http://js.jirengu.com/kukeqowive)2、三栏布局 (ht...
ios 电商demo（实现各种常见动画效果和页面布局）
ios 电商demo（实现各种常见动画效果和页面布局） ios 电商demo（实现各种常见动画效果和页面布局）
瀑布流布局_木桶布局
题目1：实现一个瀑布流布局效果demo1题目2：实现木桶布局效果demo2题目3：实现一个新闻瀑布流新闻网站demo3
Flutter开发实战：页面布局详解
本篇博客Demo下载点击这里：Flutter布局Demo[https://github.com/Eleven201...
iOS布莱恩军刀-布局约束
布莱恩军刀，布局约束功能，附Demo下载地址

数据流布局DEMO

相关文章

数据流布局DEMO

我的布局实例

iOS 中利用相对布局和绝对布局,对Table中的文字自适应调整

flex布局及常用属性

day06-css3-demo

布局demo

ios 电商demo（实现各种常见动画效果和页面布局）

瀑布流布局_木桶布局

Flutter开发实战：页面布局详解

iOS布莱恩军刀-布局约束

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读