<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav-head</title>
<style>
*{
margin:0;
padding:0;
}
.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
.pull-list{
padding:5px;
font-size:0;
position:relative;
}
.pull-list .pull-box{
display:inline-block;
float:left;
}
.pboder{
border:1px solid #ccc;
padding:5px;
margin:5px;
font-size:12px;
}
img{
width:140px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="pull-list clearfix">
<div class="pull-box">
<div class="pboder">
<img src="image/1.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/2.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/3.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/4.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/4.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/5.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/6.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/7.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/8.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/9.jpg">
</div>
</div>
<div class="pull-box">
<div class="pboder">
<img src="image/10.jpg">
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(window).on("load",function(){
function getSlist(){
var docW = $(window).width(),
boxW = $('.pull-box').eq(0).outerWidth(),
boxL = Math.floor(docW/boxW);
$(".pull-list").css({
"margin":"0 auto",
"width":boxW*boxL
})
var arrBox = [];
$('.pull-box').each(function(key,val){
var boxH = $(val).outerHeight();
if(key<boxL){
arrBox[key] = boxH;
}else{
var minH = Math.min.apply(null,arrBox);
var minIndex =$.inArray(minH,arrBox);
$(val).css({
"position":"absolute",
"left":(minIndex*boxW+5)+"px",
"top":(minH+5)+"px"
})
arrBox[minIndex] += $('.pull-box').eq(key).outerHeight();
}
})
}
getSlist();
function checkScroll(){
$(window).scroll(function(){
if($(document).height() < $(window).height() + parseInt($(window).scrollTop(),10) + 50){
$.ajax({
url:"text.json",
method:"GET",
success:function(data){
var res = data.list;
var str = "";
for(var i=0; i<res.length; i++){
str="<div class="pull-box">"+
' <div class="pboder">'+
' <img src="image/'+res[i]+'">'+
' </div>'+
' </div>';
$(".pull-list").append(str);
}
getSlist();
},
error:function(data){
console.log(data)
}
})
}
});
}
checkScroll();
$(window).resize(function() {
checkScroll();
})
})
</script>
</body>
</html>
text.json
{
"list":["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]
}