jquery implementiert ein einfaches Wasserfall-Flow-Layout

ist das eingangs erwähnte Prinzip

Es gibt zwei Arten von Wasserfall-Flow-Layouts: eines besteht aus festen Säulen und das andere aus nicht festen Säulen. Dieser Artikel beschreibt hauptsächlich die Implementierung des ersten Typs.

Das Merkmal fester Spalten besteht darin, dass die Gesamtzahl der Spalten in jeder Zeile unabhängig von der Skalierung der Seite konsistent ist.

Ein Wasserfallfluss mit einer Zeile und vier Spalten besteht aus Layout-Sicht aus vier Li-Tags. Durch bestimmte Ereignisse (z. B. wie viele Pixel scrollt die Bildlaufleiste), lesen Sie sie dann und fügen Sie die Daten dann dynamisch zur Seite hinzu.

Das Prinzip des Hinzufügens von Daten besteht nicht darin, basierend auf dem Li-Indexwert hinzuzufügen, sondern dynamisch basierend auf der Spalte mit der kürzesten Höhe unter den Spalten hinzuzufügen. Andernfalls könnte die Seite unschön aussehen (die linken und rechten Höhen sind nicht einheitlich).

Das Beispiel beinhaltet die Ajax-Methode. Kann in einer Serverumgebung ausgeführt werden.

Kein Unsinn mehr. Wenden Sie den Stil direkt an.

<ul id="ul1">
 <li>
  <div>
   <img  src="images/1.jpg" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="images/2.jpg" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="images/3.jpg" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
 <li>
  <div>
   <img  src="images/4.jpg" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" >
   <p>我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述我是文字描述</p>
  </div>
 </li>
</ul>

css

*{
 margin:0;
 padding: 0;
}
ul li{
 list-style: none;
}
#ul1{
 width: 1080px;
 margin: 100px auto 0;
}
li{
 width: 247px;
 float: left;
 margin-right: 10px;
}
li div{
 border:1px solid #000;padding:10px;
 margin-bottom:10px;
}
li div img{
 width: 225px;display: block;
}

Der Grundeffekt ist wie in der Abbildung dargestellt:

Nachdem der Stil korrekt angezeigt wurde , ändern Sie die li im Code gelöscht.

Als nächstes fügen Sie es dynamisch über Ajax hinzu.

Woher kommen die Daten?

Hier kommt die Datenschnittstelle von wookmark zum Einsatz.

http://www.wookmark.com/api/json/popular?page=1

Klicken Sie auf die URL, um einen JSON zu erhalten.

Viele Informationen. Wie analysieren?

Generell können Sie sich die Dokumentation ansehen. Wenn Sie das Dokument jedoch nicht zur Hand haben, können Sie sich den Link ansehen. Was zum Teufel ist eine Rückkehr?

function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}
$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
 })
})

Das Druckergebnis der Konsole ist:

Es stellt sich heraus, dass es sich um ein Array von 50 Bildinformationen handelt. Jedes Array-Element ist ein JSON. In dieser einfachen Demo müssen Sie vorerst nur die Vorschauattribute und Titelattribute abrufen.

Einer der Schlüssel zur Layout-Implementierung

ist die Bestimmung des kürzesten Li. Tatsächlich benötigen wir den Indexwert des kürzesten Höhen-Li.

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i++){
  if($(&#39;li&#39;).eq(i).height()<$(&#39;li&#39;).eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}

Dann lädt die getJSON-Methode

$(function(){
 $.getJSON(createUrl(1),function(data){
  //console.log(data);
  for(var i=0;i<dataArr.length;i++){
   var $html=$(&#39;<div><img  src="&#39;+data[i].preview+&#39;" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" ><p>&#39;+data[i].title+&#39;</p></div>&#39;);
   //console.log($(&#39;li&#39;).eq(getShortestLi()).height())
   $(&#39;li&#39;).eq(getShortestLi()).append($html);
  };
  console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
 })
})

es erneut und das Layout wird ausgegeben. Einfach und schön.

Zu diesem Zeitpunkt sieht alles gut aus. Doch es lauert ein fatales Problem.

Was stimmt mit der for-Schleife nicht?

Sehen Sie sich die Informationen in console.log an. Zur Analyse füge ich die Höhen der vier Li's in ein Array ein:

50 Bilder werden in 4 Spalten aufgeteilt. Die durchschnittliche Höhe muss mindestens dreitausend bis viertausend Pixel betragen.

Am Ende der Schleife beträgt der vom Programm beurteilte Endpunkt nur unverschämte 1.000 Pixel, da der Bildladevorgang langsamer ist als die Ausführungsgeschwindigkeit der for-Schleife. Obwohl die Anzeige in der Demo normal ist, kann dieser Code zu Arbeitsunfällen führen, wenn die Netzwerkgeschwindigkeit nicht gut ist.

Idee 1: Sie können feststellen, ob das Bild geladen wird.

Sie können es mit einem Timer überwachen und dann mithilfe der Rekursion umsetzen.

var index=0;
function LoadPic(index){
 var $html=$(&#39;<div><img  src="&#39;+data[index].preview+&#39;" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" ><p>&#39;+data[index].title+&#39;</p></div>&#39;)
 $(&#39;li&#39;).eq(getShortestLi()).append($html);
 var oImg=$html.find(&#39;img&#39;);
 var t=setInterval(function(){
  if(oImg.height()!=0){//如果加载完了。
   clearInterval(t);
   //console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
   if(index<50){
    return LoadPic(index+1);
   }else{
    return false;
   } 
  }else{
   console.log(&#39;wait&#39;)
  }
 },50)//每隔50ms监听一次
}
LoadPic(0);

Warten Sie jedoch aus Sicht der Benutzererfahrung, bis ein Bild angezeigt wird Es ist unfreundlich, mit dem nächsten Ladevorgang fortzufahren. Datenanbieter sollten die Höhe des Bildes direkt auf dem Server verarbeiten und in JSON-Daten zurückgeben. Wenn die Internetgeschwindigkeit sehr langsam ist, muss man lange warten und dann kommen plötzlich alle Bilder heraus. Finden Sie das nicht seltsam? Insbesondere Schnittstellen von Drittanbietern. Sobald das Laden fehlschlägt, liegt ein großes Problem vor.

Glücklicherweise stellt der Drittanbieter die Breiten- und Höheninformationen des Bildes bereit.

Sie können also immer noch eine for-Schleife haben. In den zurückgegebenen Daten gibt es Breiten- und Höhenwerte. Mit ihnen können Sie eine feste Breite (255 Pixel) und eine feste Höhe (ursprüngliche Höhe multipliziert mit einem Verhältnis) erreichen.

$(function(){
 $.getJSON(createUrl(1),function(data){
  console.log(data);
  for(var i=0;i<data.length;i++){
    //console.log(data[i].preview);
    var $html=$(&#39;<div><img  src="&#39;+data[i].preview+&#39;" alt="jquery implementiert ein einfaches Wasserfall-Flow-Layout" ><p>&#39;+data[i].title+&#39;</p></div>&#39;)
    $(&#39;li&#39;).eq(getShortestLi()).append($html);
     
    $html.find(&#39;img&#39;).css(&#39;height&#39;,(data[i].height*225/data[i].width)+&#39;px&#39;);
    $html.find(&#39;img&#39;).css(&#39;width&#39;,&#39;225px&#39;); 
   };
  //console.log([$(&#39;li&#39;).eq(0).height(),$(&#39;li&#39;).eq(1).height(),$(&#39;li&#39;).eq(2).height(),$(&#39;li&#39;).eq(3).height()])
 })
})

Tatsächlich denke ich persönlich, dass dies die einfachste Lösung mit der besten Benutzererfahrung ist.

Beim Wasserfall muss man auch fließen

Die Logik des Flusses

Nach unten ziehen (scrollen) und das erste Li, das unten in den visuellen Bereich gelangt wird zuerst geladen.

Mit anderen Worten, wenn die Summe der Höhe des kürzesten Li und der Höhe des Li bis zum oberen Rand der Seite kleiner ist als die Summe der Höhe von Durch die Bildlaufleiste und die Höhe des Sichtbereichs wird das Laden der Li ausgelöst.

Die Höhe von Li ist leicht zu finden. Aber wie findet man die kürzeste Entfernung von li zum Seitenanfang?

Die native Methode kann wie folgt implementiert werden:

function getTop(obj){
 var iTop=0;
 while(obj){
  iTop+=obj.offsetTop;
  obj=obj.offsetParent;
 }//累加元素本身和自身所有父级高度偏移值
 return iTop;
}

Aber da in diesem Fall jquery verwendet wird, verfügt es natürlich über eine eigene Methode.

obj.offset().top

Scroll-Ereignis

Die native Implementierungsmethode ist: window.onscroll=function(){...}

Die Implementierungsmethode von jquery lautet: $(window).scroll(function(){...})

Überprüfen Sie nun, ob ein Problem mit dem geschriebenen Code vorliegt

(window).scroll(function(){
 var $li=$('li').eq(getShortestLi());
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 //console.log([$li.offset().top+$li.height(),document.documentElement.clientHeight+scrollTop])
 //如果li高度与li到页面顶部的高度之和<可视区高度+滚动距离
 if($li.offset().top+$li.height()<document.documentElement.clientHeight+scrollTop){
   alert(1);
 }
})

Ausführen Der Code stellt fest, dass beim Erscheinen des ersten Li im sichtbaren Bereich 1 angezeigt wird, um zu beweisen, dass es verfügbar ist.

Da Scrolling-Ereignisse beteiligt sind, sollten getJSON-bezogene Funktionen zum einfachen Aufruf als getList() gekapselt werden. Es muss also nachjustiert werden.

Der Code lautet derzeit wie folgt:

//找出高度最小li的索引值
function getShortestLi(){
 var shortest=0;
 for(var i=1;i<4;i++){
  if($(&#39;li&#39;).eq(i).height()<$(&#39;li&#39;).eq(shortest).height()){
   shortest=i;
  }
 }
 return shortest;
}
function createUrl(num){
 return 'http://www.wookmark.com/api/json/popular?page='+num+'&callback=?';
}
function getList(n){
 $.getJSON(createUrl(n),function(data){
  //console.log(data);
  for(var i=0;i
'+data[i].title+'