jQuery melaksanakan layout_jquery aliran air terjun

HTML

复制代码 代码如下:

 

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

 

CSS

复制代码 代码如下:

 * {
     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).on("load",fungsi () {
air terjun();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//Simulasikan data json;
$(window).on("scroll",function () {
              jika(tandaScrollSlide){
$.each(dataInt.data,fungsi (kunci,nilai) {
              var oBox=$("

").addClass("box").appendTo($("#main"));
                            //jQuery menyokong penyambungan dan lelaran tersirat
              var oPic=$("

").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
             });
air terjun();
         }
})
});
//Fungsi utama susun atur aliran;
fungsi air terjun () {
var $boxs=$("#main>div");
//Dapatkan div.box elemen anak langsung di bawah elemen #utama;
//Dapatkan lebar setiap lajur;
var w=$boxs.eq(0).outerWidth();
//outerWidth() mendapat lebar termasuk padding dan border;
//var w=$boxs.eq(0).width();
//width() hanya boleh mendapatkan lebar yang ditakrifkan untuk elemen;
var cols=Math.floor($(window).width()/w);
//Berapa banyak lajur untuk diperolehi;
$("#utama").width(w*cols).css("margin","0 auto");
//Tetapkan lebar dan gaya pemusatan elemen #utama;
var hArr=[];
//Set ketinggian setiap lajur;
$boxs.each(fungsi (indeks, nilai) {
//Lintas setiap elemen kotak;
//Untuk mencari titik terendah bagi semua elemen sebelumnya, kemudian tetapkan elemen ini di bawah titik terendah;
        var h=$boxs.eq(index).outerHeight();
//Ketinggian setiap elemen kotak,
             jika (index hArr[index]=h;
//Tentukan ketinggian elemen pertama dalam setiap lajur;
           } lain{
            var minH=Math.min.apply(null,hArr);
//Dapatkan ketinggian minimum dalam tatasusunan ketinggian lajur;
            var minHIindex=$.inArray(minH,hArr);
//$.inArray() kaedah mendapat nilai indeks elemen (minH) dalam tatasusunan (hArr);
//console.log(value);
//Nilai pada masa ini ialah objek DOM bagi semua elemen kotak selepas baris pertama!;
$(value).css({
//$(value): Tukar objek DOM menjadi objek jQuery sebelum anda boleh terus menggunakan kaedah jQuery
"kedudukan":"mutlak",
"atas":minH "px",
"kiri":minHIindex*w "px"
             });
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//Ketinggian elemen tertinggi terendah Ketinggian elemen baru ditambah pada ketinggian terendah = ketinggian lajur baharu;
          };
});
// console.log(hArr);
};
fungsi semakScrollSlide () {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
Kembalikan (lastBoxDis }

Sila rujuk komen dengan teliti untuk penjelasan terperinci, saya tidak akan menulisnya secara berasingan.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS serasi dengan penyemak imbas arus perdana untuk menyalin kandungan ke kemahiran clipboard_javascriptArtikel seterusnya：JS serasi dengan penyemak imbas arus perdana untuk menyalin kandungan ke kemahiran clipboard_javascript

Artikel berkaitan

Lihat lagi

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional