<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:数据是为本地的