JavaScript asli LESS melaksanakan kemahiran waterfall flow_javascript

HTML (beri perhatian kepada hubungan pakej untuk memudahkan panggilan js)

Salin kod Kod adalah seperti berikut:

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 

KURANG(kurang预编译)

复制代码 代码如下:

 * {
     jidar: 0;
     pelapik: 0;
 }
 #utama {
     jawatan: relatif;
 
 }
 .kotak {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     pelapik: 10px;
     sempadan: 1px pepejal #ccc;
     jejari sempadan: 5px;
     bayang kotak: 0px 0px 5px #ccc;
     img {
         lebar:165px;
         ketinggian:auto;
     }
 }

JavaScript(自己理解的注解)

(函数存在一定瑕疵,仅用于学习理解)

复制代码 代码如下:

window.onload = fungsi () {
air terjun("utama","kotak");
//Panggil fungsi tersuai; bertindak pada setiap elemen kotak di bawah utama;
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//Simulasikan data json;
​​Tetingkap.onscroll = fungsi () {
             jika (tandaScrollSlide) {
//Panggil fungsi tersuai; tentukan sama ada tatal di luar julat berdasarkan nilai pulangan fungsi;
            var oParent = document.getElementById("utama");
untuk (var i = 0; i                 var oBox = document.createElement("div");
                  oBox.className = "box";
                    oParent.appendChild(oBox);
//Buat blok kotak
                var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
//Buat blok gambar
                var oImg = document.createElement("img");
//Buat elemen img
                 oImg.src = "imej/" dataInt.data[i].src;
//Tetapkan rujukan imej;
oPic.appendChild(oImg);
              };
air terjun("utama","kotak");
                            // Reka letak blok data yang dijana secara dinamik dalam cara penstriman;           };
};
};
//Fungsi utama susun atur penstriman, melaraskan kedudukan blok data secara automatik;
air terjun fungsi (induk, kotak) {
// Keluarkan semua elemen kotak di bawah utama; "ibu bapa" mewakili induk, dan kotak mewakili elemen kotak
var oParent = document.getElementById(parent);
//Tetapkan elemen induk kepada pembolehubah oParent;
var oBoxs = getByClass(oParent,box);
//Melalui fungsi tersuai, dapatkan setiap elemen kotak di bawah induk; apa yang anda dapat ialah koleksi semua elemen kotak; //Tugaskan set elemen kotak yang diperolehi kepada oBoxs sekali lagi; (disebabkan isu skop, pembolehubah tidak dikongsi);
// console.log(oBoxs.length);
//Cetak bilangan elemen kotak dalam konsol untuk nyahpepijat;
var oBoxW = oBoxs[0].offsetWidth;
//Kira lebar setiap lajur; offsetWidth ialah lebar termasuk padding; // console.log(oBoxW); var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//Kira bilangan lajur yang dipaparkan pada keseluruhan halaman (lebar halaman/lebar kotak);
oParent.style.cssText = "lebar:" oBoxW*cols "px;margin:0 auto";
//Lebar elemen induk utama = lebar setiap lajur * bilangan lajur; var hArr = [];
// Tatasusunan menyimpan ketinggian setiap lajur;
untuk (var i = 0; i //Lintas tatasusunan oBoxs;
Jika (i //Yang layak di sini ialah yang pertama dalam setiap lajur baris pertama;
hArr.push(oBoxs[i].offsetHeight);
//Dapatkan ketinggian setiap lajur dan masukkannya ke dalam tatasusunan;
          }lain{
//Elemen kotak di sini bukan lagi elemen dalam baris pertama;
            var minH = Math.min.apply(null,hArr);
//Dapatkan ketinggian minimum baris pertama dan tetapkan ia kepada pembolehubah;
                         // console.log(minH);
            indeks var = getMinhIndex(hArr,minH);
//Panggil fungsi tersuai untuk mendapatkan nilai indeks pembolehubah ini;
              oBoxs[i].style.position = "mutlak";
oBoxs[i].style.top = minH "px";
               oBoxs[i].style.left = oBoxW*indeks "px";
//Tetapkan kedudukan elemen semasa;
//Nilai kiri unsur semasa = nilai indeks unsur atas * lebar setiap lajur; //oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
//Kaedah kedua ialah untuk mendapatkan nilai kiri unsur semasa;
//Pada masa ini, elemen kotak ditambahkan pada lajur indeks;
hArr[index] =oBoxs[i].offsetHeight;
//Ketinggian dikemas kini setiap lajur = ketinggian asal setiap lajur dan ketinggian elemen kotak ditambah kemudian;
          };
};
};
//JS secara asalnya memperoleh elemen melalui Kelas;
fungsi getByClass (induk,Nama nama) {
//Dapatkan elemen melalui kelas; (Dapatkan elemen claName di bawah bekas induk induk;)
var boxArr = New Array();
//Isytihar tatasusunan untuk menyimpan semua elemen yang diperolehi dengan kotak kelas;
var oElements = parent.getElementsByTagName("*")
//Isytiharkan pembolehubah untuk menyimpan semua elemen anak di bawah elemen induk ini (*);
untuk (var i = 0; i //Melintasi tatasusunan oElements;
Jika (oElements[i].className==claName) {
//Jika kelas calss elemen dalam tatasusunan adalah sama dengan parameter claName;
               boxArr.push(oElements[i]);
//Kategori elemen kotak yang dilalui ke dalam tatasusunan boxArr;
          };
};
Kembalikan kotakArr;
//Selepas memanggil tatasusunan, melintasi satu siri fungsi; };
//Dapatkan nilai indeks elemen tatasusunan;
fungsi getMinhIndex (arr,val) {
//arr ialah tatasusunan induk; val ialah elemen semasa; untuk(var i dalam arr){
//Mula melintasi dari 0;
Jika(arr[i]==val){
//Cari nilai indeks yang sepadan dengan elemen semasa dalam tatasusunan;
               kembalikan i;
//Nilai pulangan fungsi ialah nilai indeks unsur semasa;
          };
};
};
//Semak sama ada syarat untuk melancarkan pemuatan blok data dipenuhi;
fungsi semakScrollSlide () {
var oParent = document.getElementById("utama");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//Ketinggian elemen kotak terakhir dari bahagian atas halaman (cari offsetTop kotak terakhir (oBoxs.lenght-1)) separuh daripada dirinya sendiri; var scrollTop = document.body.scrollTop ||. document.documentElement.scrollTop;
//Jarak tatal bar skrol penyemak imbas;
// console.log(scrollTop);
var height = document.body.clientHeight ||. document.documentElement.clientHeight;
//Ketinggian port pandangan penyemak imbas;
// console.log(ketinggian);
Kembali (lastBoxH //Sama ada jarak tatal halaman lebih besar daripada offsetTop elemen kotak terakhir;
};

Ringkasan:

Tiada yang lebih baik daripada menggunakan aliran air terjun untuk memaparkan foto Berikut adalah kaedah pelaksanaan aliran air terjun (panjang setiap baris adalah sama dengan panjang tetingkap pelayar Ia juga boleh dilaksanakan dengan css3 adalah sangat mudah. ​​Anda boleh mengetahui dengan mencari Google.

Idea saya adalah untuk memasukkan gambar satu demi satu Apabila nisbah bidang gambar ini kekal tidak berubah dan ketinggian lebih rendah daripada 250, satu kitaran selesai, iaitu, garisan ini dimasukkan.
Kemudian masukkan gelung seterusnya untuk memasukkan baris seterusnya.