纯 CSS3 实现瀑布流效果

1、该效果使用CSS3的column-width实现,和js版的瀑布流不同:图片将纵向排列。

2、代码中使用了一小段JS,和瀑布流效果无关,主要用来动态插入元素,并实现模拟翻页。

<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>瀑布流(html5,css3,column) - by http://www.rehiy.com</title>
<style>
* {
    padding: 0;
    margin: 0;
}
#waterfall {
    margin: 15px 15px -15px 15px;
    position: relative;
    -webkit-column-width: 200px;
       -moz-column-width: 200px;
            column-width: 200px;
}
#waterfall div {
    width: 100%;
    background: #eee;
    margin-bottom: 15px;
    display: inline-block;
}
</style>
</head>
<body>
<div id="waterfall"></div>
<input type="button" onclick="more()" value="加载更多..."/>
<script type="text/javascript">
    var i = 0;
    function more() {
        var w = document.getElementById('waterfall');
        for(var n = i + 30; i < n; i++) {
            height = Math.floor( Math.random()*200 + 200 );
            w.innerHTML += '<div style="height:' + height + 'px;">'+i+'</div>';
        }
    }
    more();
</script>
</body>
</html>
文章作者: 若海; 原文链接: https://www.rehiy.com/post/102/; 转载需声明来自技术写真 - 若海

添加新评论