jQuery implementiert den Wasserfallfluss layout

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.

Verwandte Etiketten：

jquery 瀑布流

Quelle：php.cn

Vorheriger Artikel：JS ist mit gängigen Browsern kompatibel, um Inhalte in die Zwischenablage zu kopieren. Javascript-Fähigkeiten Nächster Artikel：js-Methode zum Implementieren der seitenübergreifenden Iframe-Funktioncalling_javascript skills

Erklärung dieser Website

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

Neueste Artikel des Autors