Detaillierte Erläuterung der jQuery-Implementierung des Wasserfall-Flow-Layouts (PC und Mobilgerät)

Das Wasserfall-Flusslayout ist heutzutage eine weit verbreitete Art der Bilddarstellung, sei es auf PCs oder mobilen Geräten wie Mobiltelefonen. Es gibt ungefähr drei Arten von Layoutbildern: gleiche Höhen und gleiche Breiten, gleiche Breiten und ungleiche Höhen sowie gleiche Höhen und ungleiche Breiten. Als nächstes nehmen wir die häufigste Form von gleichen Breiten und ungleichen Höhen als Beispiel.

Wir verwenden Baidu-Bilder als Beispiel:

Dies ist eine gängige Wasserfall-Layout-Methode auf dem PC. Sehen wir uns als Nächstes die Elemente an, um zu sehen, wie sie in Baidu-Bildern angeordnet sind:

Wie Sie sehen können, enthält es tatsächlich mehrere Spaltencontainer gleicher Breite, und die Bilder werden durch Berechnung in verschiedene Container verschoben. Die in diesem Artikel vorgestellte Anzeigemethode erfolgt durch Positionierung. Obwohl die endgültige Layout-Anzeigemethode unterschiedlich ist, sind die vorherigen Algorithmen relativ ähnlich.

Praktisch

Zuerst schreiben wir mehrere Einheiten des folgenden Stils in den Körper und lassen die „Box“ nach links schweben:

<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>

Nach dem Login kopieren

Erzielen Sie den folgenden Effekt:

Weiter:

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

Nach dem Login kopieren

Der obige Code lautet ungefähr wie folgt:

1. Berechnen Sie zunächst, wie viele Bilder (Anzahl) in einer Zeile im Browser untergebracht werden können. Bei der Übergabe von „true“ wird die Größe aller Boxmodellattribute des Elements einschließlich Rand und Abstand verwendet , und Grenze wird zurückgegeben;

2. Erstellen Sie ein Array (columnHeightArr), das die Höhe jeder Spalte speichert. Die Länge des Arrays ist der Num-Wert

3. Durchlaufen Sie alle Bilder und speichern Sie die Bildhöhen in der Spaltenhöhe (columnHeightArr). Berechnen Sie zunächst die Mindesthöhe (minHeight) und die Mindesthöhe in allen Spalten (minHeightIndex). Positionieren Sie dann das Bild beginnend in der zweiten Zeile unterhalb der Spalte mit der minimalen Höhe, der Effekt ist wie folgt:

Sie können sehen, dass alle Bilder an derselben Stelle platziert sind, obwohl sie an der richtigen Stelle platziert sind. Dies liegt daran, dass wir die Höhe der Spalte erhöhen müssen, nachdem wir ein Bild platziert haben:

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

Nach dem Login kopieren

Das Ergebnis ist korrekt:

Hinweis: Der obige Code muss in der window.onload-Methode ausgeführt werden, da die Höhe jedes Bildes nur dann geändert wird, wenn alle Bildressourcen auf der Seite geladen sind effizient sein.

Daher wird es einige sehr schwerwiegende Probleme geben, das Bild wird nicht vollständig geladen und das Bild wird unvollständig angezeigt und die Höhe wird auf der mobilen Seite fehlen. Und wenn wir mehr laden, wird es schwieriger zu beurteilen, ob die neu hinzugefügten Bilder geladen wurden.

In der tatsächlichen Produktion ist es nicht möglich, Bilder von Anfang an in HTML zu schreiben, daher gehen wir normalerweise wie folgt vor:

Wenn wir die Bildadresse erhalten, müssen wir zunächst auch die Breite und Höhe des Bildes ermitteln. Dies ist für das Server-Backend nicht schwierig. Sie können die Backend-Brüder bitten, die Breiten- und Höhendaten zu buchstabieren das Bild in JSON und übergebe es an dich ;

* Als nächstes werde ich einen kleinen Trick vorstellen , der sehr praktisch ist. Er kann sicherstellen, dass sich die Proportionen ändern, egal wie groß sie sind Bleiben Sie immer konsistent . Diese Technik funktioniert besonders gut auf Mobilgeräten, da Elemente häufig Prozentsätze verwenden, um sie responsiv zu machen.

Wenn sich auf einer Mobiltelefonseite ein Bild befindet, sollte seine Breite die Hälfte des Bildschirms betragen und sein Seitenverhältnis sollte 2:1 betragen. Das Verhältnis muss auf Mobiltelefonen mit jeder Auflösung unverändert bleiben. Wie geht das? Legen Sie die folgenden Attribute für das Element fest:

.box {
 width: 50%;
 height: 0;
 padding-bottom: 100%;
}

Nach dem Login kopieren

不设置高度，而是用padding“挤”出元素高度，而padding的百分比值都是基于父级容器的宽度。padding需要挤多少呢？就是宽度乘以高宽比（width和padding值均为百分比值），这就是我们为什么需要获得图片尺寸的原因。

效果：

可以看到在chrome手机模拟器中ipone4和肾6Plus的显示效果是完全一样的。在手机页面中宽是固定的，而高会随着页面内容的多少而变化，这个技巧利用元素padding百分比的值其实是基于其父级容器的宽，将高的值巧妙的转化成与宽相关。

说到现在可能有人终于忍不住要问了，讲了这么多和瀑布流有什么关系！简单就是一句话，我们要抛弃 img 标签，而采用背景图的方式。为了使用背景图，就得保持元素的比例永远与图片保持一致。

通过这种方式，可以不用判断图片都加载完毕，直接产生一些与图片同比例的div，再为其设置背景图，如下：

这里比如最外层的box宽度为220px，里面的img元素宽度就可以为100%，高度就可以通过padding挤出了。

懒加载

使用背景图的方式还有好处那就是可以比较方便的实现懒加载。那什么是懒加载呢？就是当元素在我们的视野中时才展示图片，滚动时屏幕下方的图片并不展示，这可以很好的增加加载速度提升体验。

首先我们给最外层的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>

Nach dem Login kopieren

接下来我们编写懒加载函数：

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

Nach dem Login kopieren

首先我们获取所有拥有 .box-item 类名的元素，遍历。viewTop 为图片相对于浏览器窗口的相对高度，类似于position:fixed感觉。

通过条件进行判断，只有当该图片在浏览器窗口内（之上或之下都不行）时，将需要设置背景图元素的 data-src 值展示出来，并删除该属性。

之后将最外层元素的 box-item 删除，因为已经展示出来的图片不需要再进行这些判断，删除了该类名下一次滚动时就不会获取到已经展示过的元素，需要遍历的次数就会越来越少，这样能起到一个优化的作用。

该函数需要在你的元素已经append进页面时调用，以及在滚动时调用：

lazyLoad();
$(window).scroll(lazyLoad);

滚动加载

说完了懒加载，再说说滚动加载。所谓滚动加载就是当页面滚动到底部附近时加载新的图片。我这里选择的是滚动到高度最小的列底部时加载新的数据，你也可以根据自己的喜好来做判断。

function scrollLoad() {
　　var viewHeight = $(window).scrollTop() + $(window).height(),
 minHeight = Math.min.apply(null, columnHeightArr);

　　if (viewHeight >= minHeight) {
 　　//loadMore...
　　}
}

Nach dem Login kopieren

滚动加载也是在window的滚动事件中进行监听，可以与懒加载一起进行：

$(window).scroll(function() {
 scrollLoad();
 lazyLoad(); 
});

Nach dem Login kopieren

说完了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);
　　}
});

Nach dem Login kopieren

不同的是为了适应不同屏幕的手机，最外层的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();
 });

Nach dem Login kopieren

以上就是为大家分享的关于jQuery瀑布流布局，内容很丰富，需要大家一点点的理解消化，真正的做到学以致用，希望能够帮助到大家。