瀑布流特效演示

<div id="wrap">
			<ul>
				<li>
					<!--<div class="detail">
						<a href="#"><img src="imgs/1.jpg"/></a>
						<a href="#" class="dec"></a>
						<div class="time"><p ></p></div>
					</div>-->
				</li>
				<li style="margin-left:20px;"></li>
				<li style="margin-left:20px;"></li>
				<li style="float:right">
				</li>
			</ul>
 </div>

  *{padding: 0;margin: 0;}
		li{list-style: none;width: 265px;}
		a {text-decoration: none;color: #666;}
		#wrap{width: 1120px;margin: 50px auto 0; box-shadow: 0 0 5px #000;overflow: hidden;}
		#wrap li{float: left;margin-bottom: 20px;}
		.detail{border: 1px solid #ddd;}
		.detail .dec{display: block;padding: 8px 15px;font-size: 14px;line-height: 25px;}
		.time{height: 40px;background: lightgray;line-height: 40px;text-align: center;}

<script type="text/javascript">
			$(function(){
				var index = -1
//				获取li元素高度最小的索引
				function minIndex(){
					var minH = $("li").eq(0).height();//假设第一个li元素为最小高度
					var index = 0
					for(var i=0;i<$("li").length;i++){
						var liH = $("li").eq(i).height()
						if(minH > liH){
							minH = liH;
							index = i;
						}
					}
					return index
				}
				
//				创建元素
				function creatEle(index){
					if(imgData[index]){
						var divEl = `<div class="detail">
										<a href="#"><img src="${imgData[index].src}"/></a>
										<a href="#" class="dec">
											${imgData[index].dec}
										</a>
										<div class="time">
											<p >${imgData[index].time}</p>
										</div>
									 </div>`
						return $(divEl)
					}
				}
				
//				显示数据
				function showImg(num){
					index ++
					var $div = creatEle(index)
					var i = minIndex()
					if(!$div) return;
					$div.fadeIn(1000)
					$("li").eq(i).append($div)
					var img = $div.find("img").get(0)
					img.onload = function(){
						if(index < num){
							showImg(num)
						}
					}
					
				}
				showImg(10)				
//				滚动加载图片
				$(window).on("scroll",function(){
					var i = minIndex()
					var H = $("#wrap").offset().top + $("li").eq(i).height()
					if(H < $(window).scrollTop()+$(window).height()){
						var num = index+5;
						showImg(num);
					}
				})

			})
</script>

PS：数据是为本地的