suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert den Wasserfallfluss layout_jquery

jQuery implementiert den Wasserfallfluss layout_jquery

WBOY
WBOYOriginal
2016-05-16 16:27:322121Durchsuche

HTML

复制代码 代码如下:

 

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

 

CSS

复制代码 代码如下:

 * {
     Rand: 0;
     Polsterung: 0;
 }
 #main {
     Position: relativ;
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     Polsterung: 10px;
     Rand: 1px fest #ccc;
     Randradius: 5px;
     Box-Shadow: 0px 0px 5px #ccc;
     img {
         Breite:165px;
         height:auto;
     }
 }

JavaScript

复制代码 代码如下:

$(window).on("load",function () {
Wasserfall();
var dataInt = { "data":[{"src":7.jpg"},{"src":8.jpg"},{"src":9.jpg"},{"src": "6.jpg"}]}
//JSON-Daten simulieren;
$(window).on("scroll",function () {
              if(checkScrollSlide){
$.each(dataInt.data,function (key,value) {
              var oBox=$("
").addClass("box").appendTo($("#main"));
                           //jQuery unterstützt Verkettung und implizite Iteration;               var oPic=$("
").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
             });
Wasserfall();
         }
})
});
//Flow-Layout-Hauptfunktion;
Funktion Wasserfall () {
var $boxs=$("#main>div");
//Holen Sie sich das direkte untergeordnete Element div.box unter dem #main-Element;
//Ermitteln Sie die Breite jeder Spalte;
var w=$boxs.eq(0).outerWidth();
//outerWidth() ruft die Breite inklusive Polsterung und Rand ab;
//var w=$boxs.eq(0).width();
//width() kann nur die für das Element definierte Breite abrufen;
var cols=Math.floor($(window).width()/w);
//Wie viele Spalten sollen erhalten werden;
$("#main").width(w*cols).css("margin","0 auto");
//Legen Sie die Breite und den Zentrierungsstil des #main-Elements fest;
var hArr=[];
//Satz der Höhen jeder Spalte;
$boxs.each(function (index,value) {
//Jedes Boxelement durchlaufen;
//Um den tiefsten Punkt aller vorherigen Elemente zu finden, setzen Sie dieses Element unter den tiefsten Punkt;
        var h=$boxs.eq(index).outerHeight();
//Höhe jedes Boxelements,
             if (index hArr[index]=h;
//Bestimmen Sie die Höhe des ersten Elements in jeder Spalte;
           } sonst{
            var minH=Math.min.apply(null,hArr);
//Mindesthöhe im Spaltenhöhen-Array abrufen;
            var minHIndex=$.inArray(minH,hArr);
//$.inArray()-Methode ruft den Indexwert des Elements (minH) im Array (hArr) ab;
//console.log(value);
//Der Wert zu diesem Zeitpunkt ist das DOM-Objekt aller Boxelemente nach der ersten Zeile!;
$(value).css({
//$(Wert): Konvertieren Sie das DOM-Objekt in ein jQuery-Objekt, bevor Sie jQuery-Methoden weiterhin verwenden können; „position“: „absolut“,
„top“:minH „px“,
"left":minHIndex*w "px"
             });
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//Höhe des niedrigsten höchsten Elements Die Höhe des Elements, das gerade zur niedrigsten Höhe hinzugefügt wurde = neue Spaltenhöhe;
          };
});
// console.log(hArr);
};
Funktion checkScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
Return (lastBoxDis }

Bitte lesen Sie die Kommentare sorgfältig durch, um eine detaillierte Erklärung zu erhalten. Ich werde sie nicht separat aufschreiben.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS ist mit gängigen Browsern kompatibel, um Inhalte in die Zwischenablage zu kopieren. Javascript-FähigkeitenNächster Artikel：JS ist mit gängigen Browsern kompatibel, um Inhalte in die Zwischenablage zu kopieren. Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen