设为首页 加入收藏

TOP

【JavaScript】多栏布局与JS实现瀑布流(二)
2017-10-11 13:50:22 】 浏览:10071
Tags:JavaScript 布局 实现 瀑布
<
img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x100"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x150"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x200"/></div> </div> <div class="box"> <div class="pic"><img src="http://placehold.it/200x300"/></div> </div> </div>

  css用了多列的column-width和column-gap属性

* {
            margin: 0;
            padding: 0;
        }

        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .main {
            position: relative;
            -webkit-column-width: 210px;
            -webkit-column-gap: 5px;
            -moz-column-gap: 5px;
        }

        .box {
            float: left;
            padding: 15px 0 0 15px;
        }

        .box .pic {
            width: 200px;
            height
首页 上一页 1 2 3 下一页 尾页 2/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇互联网大厂校招前端面试考点分享.. 下一篇盒子模型的理解

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目