jQuery實現(xiàn)瀑布流布局詳解（PC和移動端）
瀑布流布局已成為當今非常普遍的圖片展示方式，無論是PC還是手機等移動設備上。這種布局圖片的樣式大概分為三種：等高等寬、等寬不等高、等高不等寬，接下來我們就最為普遍的等寬不等高形式來作為示例。
我們用百度圖片作為范例：
這就是PC端比較常見的瀑布流布局方式，接下來我們審查下元素看看百度圖片里面是如何布局：
可以看到，它里面實際是若干個等寬的列容器，通過計算將圖片push到不同的容器里。而本文介紹的展示方法是通過定位的方式，雖然最后布局展示的方式不同，但之前的算法都比較類似。
動手
首先我們將如下樣式的若干個單元寫進body中，并將“box”向左浮動：
<div class="box"> <img class="img" src="./resource/images/1.jpg" /> <div class="desc">Description</div> </div> <div class="box"> <img class="img" src="./resource/images/2.jpg" /> <div class="desc">Description</div> </div> <div class="box"> <img class="img" src="./resource/images/3.jpg" /> <div class="desc">Description</div> </div>
得到如下效果：
接下來：
var boxArr = $('.box'),
num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
columnHeightArr = [];
columnHeightArr.length = num;
boxArr.each(function(index, item) {
if (index < num) {
columnHeightArr[index] = $(item).outerHeight(true);
} else {
var minHeight = Math.min.apply(null, columnHeightArr),
minHeightIndex = $.inArray(minHeight,columnHeightArr);
$(item).css({
position: 'absolute',
top: minHeight,
left: boxArr.eq(minHeightIndex).position().left
});
}
});
以上代碼大意為：
1. 首先計算出在瀏覽器中一行能容納多少圖片 (num) ，注意這里用了outerWidth，當傳入true時會返回元素包括margin、padding、border全部盒模型屬性的尺寸；
2. 創(chuàng)建一個存儲每一列高度的數(shù)組 (columnHeightArr) ，該數(shù)組的長度即為num值；
3. 遍歷所有圖片，將第一行的圖片高度分別存入列高數(shù)組中 (columnHeightArr) ，從第二行開始，首先計算出所有列中最小的高度 (minHeight) 以及最小高度所在的列 (minHeightIndex)。之后將第二行開始的圖片定位在高度最小列的下面，效果如下：
可以看到雖然擺對了地方但是所有的圖片都放在同一個地方了，這是因為我們需要在擺放一張圖片后就要增加該列的高度：
var boxArr = $('.box'),
num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
columnHeightArr = [];
columnHeightArr.length = num;
boxArr.each(function(index, item) {
if (index < num) {
columnHeightArr[index] = $(item).outerHeight(true);
} else {
var minHeight = Math.min.apply(null, columnHeightArr),
minHeightIndex = $.inArray(minHeight, columnHeightArr);
$(item).css({
position: 'absolute',
top: minHeight,
left: boxArr.eq(minHeightIndex).position().left
});
columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
}
});
結果正確：
注意：上面的代碼需要運行于window.onload方法里，因為只有當頁面中的圖片資源全部加載完畢后，其每張圖片的高度才會有效。
因此會有一些很嚴重的問題，當網(wǎng)絡不好的時候圖片沒有完全加載完成就會出現(xiàn)圖片展示不全高度缺失的情況，這點在移動端很明顯。而且當我們加載更多時，更難判斷新追加的圖片是否加載完成。
在實際生產中更不會有一開始就將圖片寫死在HTML中的情況，所以我們通常用以下的方式來做：
首先我們在獲得圖片地址時同時也需要獲取圖片的寬和高 ，這點對服務端后臺來說并不是什么難事，可以拜托后臺兄弟將圖片的寬高數(shù)據(jù)拼進JSON，傳遞給你；
*接下來介紹小技巧，非常實用，它能保證一個元素無論大小如何變化，比例始終保持一致。這個技巧尤其適用于移動端，因為元素為了響應式通常使用百分比的形式。
假如手機頁面中有一張圖片，其寬度要為屏幕的一半，高寬比為2:1，需要在任何分辨的手機上保持比例不變。如何做？給元素設置如下屬性：
.box {
width: 50%;
height: 0;
padding-bottom: 100%;
}
不設置高度，而是用padding“擠”出元素高度，而padding的百分比值都是基于父級容器的寬度。padding需要擠多少呢？就是寬度乘以高寬比（width和padding值均為百分比值），這就是我們?yōu)槭裁葱枰@得圖片尺寸的原因。
效果：
可以看到在chrome手機模擬器中ipone4和腎6Plus的顯示效果是完全一樣的。在手機頁面中寬是固定的，而高會隨著頁面內容的多少而變化，這個技巧利用元素padding百分比的值其實是基于其父級容器的寬，將高的值巧妙的轉化成與寬相關。
說到現(xiàn)在可能有人終于忍不住要問了，講了這么多和瀑布流有什么關系！簡單就是一句話，我們要拋棄 img 標簽，而采用背景圖的方式。為了使用背景圖，就得保持元素的比例永遠與圖片保持一致。
通過這種方式，可以不用判斷圖片都加載完畢，直接產生一些與圖片同比例的div，再為其設置背景圖，如下：
這里比如最外層的box寬度為220px，里面的img元素寬度就可以為100%，高度就可以通過padding擠出了。
懶加載
使用背景圖的方式還有好處那就是可以比較方便的實現(xiàn)懶加載。那什么是懶加載呢？就是當元素在我們的視野中時才展示圖片，滾動時屏幕下方的圖片并不展示，這可以很好的增加加載速度提升體驗。
首先我們給最外層的box增加一個box-item類名（之后有用），將圖片url并不設置給backgroundImage屬性，而是賦給一個自定義屬性：data-src。
<div class="box box-item"> <div class="img" data-src="./resource/images/1.jpg"></div> <div class="desc">Description</div> </div>
接下來我們編寫懶加載函數(shù)：
function lazyLoad() {
var boxArr = $('.box-item');
boxArr.each(function(index, item) {
var viewTop = $(item).offset().top - $(window).scrollTop(),
imgObj = $(item).find('.img');
if ((viewTop < $(window).height()) && (($(item).offset().top + $(item).outerHeight(true)) > $(window).scrollTop())) {
imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src');
$(item).removeClass('box-item');
}
})
}
首先我們獲取所有擁有 .box-item 類名的元素，遍歷。viewTop 為圖片相對于瀏覽器窗口的相對高度，類似于position:fixed感覺。
通過條件進行判斷，只有當該圖片在瀏覽器窗口內（之上或之下都不行）時，將需要設置背景圖元素的 data-src 值展示出來，并刪除該屬性。
之后將最外層元素的 box-item 刪除，因為已經(jīng)展示出來的圖片不需要再進行這些判斷，刪除了該類名下一次滾動時就不會獲取到已經(jīng)展示過的元素，需要遍歷的次數(shù)就會越來越少，這樣能起到一個優(yōu)化的作用。
該函數(shù)需要在你的元素已經(jīng)append進頁面時調用，以及在滾動時調用：
lazyLoad();
$(window).scroll(lazyLoad);
滾動加載
說完了懶加載，再說說滾動加載。所謂滾動加載就是當頁面滾動到底部附近時加載新的圖片。我這里選擇的是滾動到高度最小的列底部時加載新的數(shù)據(jù)，你也可以根據(jù)自己的喜好來做判斷。
function scrollLoad() {
var viewHeight = $(window).scrollTop() + $(window).height(),
minHeight = Math.min.apply(null, columnHeightArr);
if (viewHeight >= minHeight) {
//loadMore...
}
}
滾動加載也是在window的滾動事件中進行監(jiān)聽，可以與懶加載一起進行：
$(window).scroll(function() {
scrollLoad();
lazyLoad();
});
說完了PC端，我們來說下手機端。其實原理是一樣的，只是從多列變成固定的兩列了。
var boxArr = $('.box'),
columnHeightArr = [];
columnHeightArr.length = 2;
boxArr.each(function(index, item) {
if (index < 2) {
columnHeightArr[index] = $(item).outerHeight(true);
} else {
var minHeight = Math.min.apply(null, columnHeightArr),
minHeightIndex = $.inArray(minHeight, columnHeightArr);
$(item).css({
position: 'absolute',
top: minHeight,
left: boxArr.eq(minHeightIndex).position().left
});
columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
}
});
不同的是為了適應不同屏幕的手機，最外層的box容器寬度和邊距要設置成百分比的形式。
最后有一點要注意，因為我們沒有像百度一樣用一個個列盒子去裝，而是用定位的方式。導致的問題是圖片元素的父級沒法自適應高度，如果你有相關的需求我們可以計算出所有列中最長的長度，并將這個值賦值給父容器的min-height屬性：
$('body').css('minHeight',Math.max.apply(null, columnHeightArr));
整理下完整的代碼，瀑布流的全套服務就到這了
var dataArr = [
{picUrl:'./resource/images/1.jpg',width:522,height:783},
{picUrl:'./resource/images/2.jpg',width:550,height:786},
{picUrl:'./resource/images/3.jpg',width:535,height:800},
{picUrl:'./resource/images/4.jpg',width:578,height:504},
{picUrl:'./resource/images/5.jpg',width:1440,height:900}
];
$.each(dataArr, function(index, item) {
$("body").append('<div class="box box-item">' +
'<div class="img" style="height:0;padding-bottom:'+cRate(item) * 100 + "%"+'" data-src="'+item.picUrl+'"></div>' +
'<div class="desc">Description</div>' +
'</div>');
});
var boxArr = $('.box'),
num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
columnHeightArr = [];
columnHeightArr.length = num;
arrangement();
$('body').css('minHeight',Math.max.apply(null, columnHeightArr));
lazyLoad();
function arrangement() {
boxArr.each(function(index, item) {
if (index < num) {
columnHeightArr[index] = $(item).outerHeight(true);
} else {
var minHeight = Math.min.apply(null, columnHeightArr),
minHeightIndex = $.inArray(minHeight, columnHeightArr);
$(item).css({
position: 'absolute',
top: minHeight,
left: boxArr.eq(minHeightIndex).position().left
});
columnHeightArr[minHeightIndex] += $(item).outerHeight(true);
}
});
}
function lazyLoad() {
var boxArr = $('.box-item');
boxArr.each(function(index, item) {
var viewTop = $(item).offset().top - $(window).scrollTop(),
imgObj = $(item).find('.img');
if ((viewTop < $(window).height()) && ($(item).offset().top + $(item).outerHeight(true) > $(window).scrollTop())) {
// console.log($(item).attr('data-src'));
imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src');
$(item).removeClass('box-item');
}
})
}
function cRate(obj) {
return obj.height / obj.width;
}
function scrollLoad() {
var viewHeight = $(window).scrollTop() + $(window).height(),
minHeight = Math.min.apply(null, columnHeightArr);
if (viewHeight >= minHeight) {
//loadMore...
}
}
$(window).scroll(function() {
lazyLoad();
scrollLoad();
});
以上就是為大家分享的關于jQuery瀑布流布局，內容很豐富，需要大家一點點的理解消化，真正的做到學以致用，希望能夠幫助到大家。
相關文章
JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作
這篇文章主要介紹了JavaScript jQuery 中定義數(shù)組與操作及jquery數(shù)組操作的相關資料,需要的朋友可以參考下2015-12-12
本篇文章是對jQuery中的ajax技術進行了詳細的分析介紹，需要的朋友參考下2013-06-06
jQuery實現(xiàn)DIV響應鼠標滑過由下向上展開效果示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)DIV響應鼠標滑過由下向上展開效果,涉及jQuery基于事件響應結合stop與animate方法控制頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2018-04-04
Jquery仿IGoogle實現(xiàn)可拖動窗口示例代碼
這個拖動窗口是根據(jù)一個Jquery的框架直接做出來的:easywidgets，廢話就不多說了，直接把源代碼貼出來，讓大家學習2014-08-08
這篇文章主要為大家詳細介紹了使用jQuery.Pin垂直滾動時固定導航的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jQuery+css3實現(xiàn)轉動的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實現(xiàn)轉動的正方形效果,可實現(xiàn)圖片組集體轉動的功能,通過jQuery結合時間函數(shù)定時操作css3屬性實現(xiàn)旋轉效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01
為了保證在pc，ios，android端都可以使用，所以使用H5頁面的方式嵌入app的webview中。接下來通過本文給大家介紹jquery tagsinput在h5郵件客戶端中應用詳解，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了表單中單選框添加選項和移除選項的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
下面介紹自己寫的一個jQuery圓角的插件，功能非常簡單。目前只能實現(xiàn)1px的固定弧度的圓角矩形邊框。2010-10-10
這篇文章主要為大家詳細介紹了jquery實現(xiàn)樓層滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04