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