瀑布流简易写法

style

<style type="text/css">
	html,body{
		height: 100%;
	}
	.wrap{
		width: 900px;
		height: 100%;
		margin: 0 auto;
		background:antiquewhite;
		box-sizing: border-box;
	}
	.wrap>div{
		width: 150px;
		margin-right: 37px;
		float: left;
		padding-top: 5px;
		box-sizing: border-box;
	}
	.wrap>div::after{
		content: "";
		display: block;
		clear: both;
	}
	.wrap>div>div{
		background: orangered;
		margin-bottom: 20px;
		color: white;
		font-weight: bold;
		font-size: 28px;
		text-align: center;
	}
	.wrap>div:nth-child(5n){
		margin-right: 0 !important;
	}
</style>

代码块

<div class="wrap">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

js

<script type="text/javascript">
			var num = 1;
			function creatcube(){
				var box = document.createElement("div");
				var h = Math.floor(Math.random() * 3 ) + 3;
				box.style.height = h * 100 + "px";
				box.innerHTML = num++;
				var min,pos;
				$(".wrap>div").each(function(i,x){
					if(min == undefined){
						min = $(x).height();
						pos = i;
					}else if(min > $(x).height()){
						min = $(x).height();
						pos = i;
					}
				})
				$(".wrap>div").eq(pos).append(box);
			}
			
			for(var i = 0; i < 15; ++i){
				creatcube();
			}
			
			document.onscroll = function(){
				if(($(document).height() - window.innerHeight) - 10 <= document.documentElement.scrollTop){
					for(var i = 0; i < 5; ++i){
						creatcube();
					}
				}
			}
		</script>