溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

網(wǎng)頁(yè)布局--瀑布流

發(fā)布時(shí)間：2020-07-20 02:03:01 來(lái)源：網(wǎng)絡(luò) 閱讀：565 作者：大大果 欄目：開發(fā)技術(shù)

<!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 = []; //聲明一個(gè)空數(shù)組，存放各列高度

$(window).on('load resize',function(){

var wrapWidth = $('#wrap').innerWidth(), //容器的寬度

$pics = $('.pics'),

picsWidth = $pics.eq(0).outerWidth(),

cols = Math.floor(wrapWidth / picsWidth),//每行的列數(shù)

spacing = (wrapWidth - picsWidth * cols) / (cols + 1),

html ='';  //用於保存中間處理過(guò)程中的html字符串

/*=================按最短列添加================*/

//循環(huán)向wrap中存放cols個(gè)列盒子

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');

        //遍歷所有的圖片并將它們按最短了的順序放在各個(gè)列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); //將當(dāng)前圖片append到最短列

position[minIndex] += $(element).outerHeight(true);  //重新計(jì)算minIndex列的高度

});


//ajax加載更多圖片 當(dāng)滾動(dòng)高度超過(guò)最短列時(shí)開始加載

var _page = 2,

  isLoading = false;  //是否是正在通過(guò)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打印出來(lái)看一下長(zhǎng)什么樣子，方便我們進(jìn)一步對(duì)其進(jìn)行處理

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; //可以繼續(xù)加載圖片

}

});

}


});


});

</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長(zhǎng)成下面圖片中的樣子，首先它是一個(gè)object,有3個(gè)屬性，分貝為code，msg和newslist。我們感興趣的是newslist，因?yàn)槔锩姹４媪苏?qǐng)求到的圖片對(duì)象，而且它是一個(gè)數(shù)組，它的picUrl屬性就是我們需要的圖片網(wǎng)絡(luò)地址。有了這些信息就可對(duì)它進(jìn)行處理了。詳細(xì)步驟見代碼，就不啰嗦了。網(wǎng)頁(yè)布局--瀑布流

最后希望對(duì)大家有所幫助。-->




附件：http://down.51cto.com/data/2368262
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手