溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#wrap{width: 90%;margin: 10px auto;border: 1px solid;}
.pics{width: 200px;padding: 5px;border: 1px solid #ddd;margin-top: 15px;left: 0;top: 0;}
.pics img{width: 200px;display: block;}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
var position = []; //聲明一個空數組，存放各列高度
$(window).on('load resize',function(){
var wrapWidth = $('#wrap').innerWidth(), //容器的寬度
$pics = $('.pics'),
picsWidth = $pics.eq(0).outerWidth(),
cols = Math.floor(wrapWidth / picsWidth),//每行的列數
spacing = (wrapWidth - picsWidth * cols) / (cols + 1),
html =''; //用於保存中間處理過程中的html字符串
/*=================按最短列添加================*/
//循環向wrap中存放cols個列盒子
for(i=0; i<cols; i++){
html += "<div style='display:inline-block; width:"+picsWidth+"px; margin-left:"+spacing+"px; vertical-align:top;'></div>";
}
var $wrapCols = $(html).appendTo('#wrap');
//遍歷所有的圖片并將它們按最短了的順序放在各個列div元素中
$pics.each(function(index,element){
if(index < cols){
position.push(0);
}
//查找最短列的索引值
var min = Math.min.apply(null,position), //position中的最小值 minIndex = $.inArray(min,position); //找出最短列的索引
$wrapCols.eq(minIndex).append(element); //將當前圖片append到最短列
position[minIndex] += $(element).outerHeight(true); //重新計算minIndex列的高度
});
//ajax加載更多圖片 當滾動高度超過最短列時開始加載
var _page = 2,
isLoading = false; //是否是正在通過ajax加載圖片
$(window).on('scroll',function(){
var _scTop = $(this).scrollTop(),
minHeight = Math.min.apply(null,position),
winHeight = $(window).height(); //窗口高度
if(!isLoading && _scTop >= minHeight-winHeight){
isLoading = true;
$.ajax({
type:'get',
url:'http://apis.baidu.com/txapi/mvtp/meinv',
data:{'num':20},
headers:{'apikey':'your own apiey'}, //此處的apikey需要換成自己的apikey
dataType:'json',
success:function(data){
console.log(data);//先將responseText打印出來看一下長什么樣子，方便我們進一步對其進行處理
var array = data.newslist,
html = '';
$.each(array,function(){
html += '<div class="pics"><img src="' + this.picUrl+ '" /></div>';
});
$(html).each(function(index,element){
$(this).children('img').on('load',function(){
var minIndex = $.inArray(Math.min.apply(null,position),position);
$('#wrap>div').eq(minIndex).append(element);
position[minIndex] += $(element).outerHeight(true);
});
});
isLoading = false; //可以繼續加載圖片
}
});
}
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="pics"><img src="img3/1.jpg" alt="1" /></div>
<div class="pics"><img src="img3/2.jpg" alt="1" /></div>
<div class="pics"><img src="img3/3.jpg" alt="1" /></div>
<div class="pics"><img src="img3/4.jpg" alt="1" /></div>
<div class="pics"><img src="img3/5.jpg" alt="1" /></div>
<div class="pics"><img src="img3/6.jpg" alt="1" /></div>
<div class="pics"><img src="img3/7.jpg" alt="1" /></div>
<div class="pics"><img src="img3/8.jpg" alt="1" /></div>
<div class="pics"><img src="img3/9.jpg" alt="1" /></div>
<div class="pics"><img src="img3/10.jpg" alt="1" /></div>
<div class="pics"><img src="img3/11.jpg" alt="1" /></div>
<div class="pics"><img src="img3/12.jpg" alt="1" /></div>
<div class="pics"><img src="img3/13.jpg" alt="1" /></div>
<div class="pics"><img src="img3/14.jpg" alt="1" /></div>
<div class="pics"><img src="img3/15.jpg" alt="1" /></div>
<div class="pics"><img src="img3/16.jpg" alt="1" /></div>
<div class="pics"><img src="img3/17.jpg" alt="1" /></div>
<div class="pics"><img src="img3/18.jpg" alt="1" /></div>
</div>
</body>
</html>
<!--最后我們可以看到得到的responseText長成下面圖片中的樣子，首先它是一個object,有3個屬性，分貝為code，msg和newslist。我們感興趣的是newslist，因為里面保存了請求到的圖片對象，而且它是一個數組，它的picUrl屬性就是我們需要的圖片網絡地址。有了這些信息就可對它進行處理了。詳細步驟見代碼，就不啰嗦了。
最后希望對大家有所幫助。-->
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
