jQuery melaksanakan layout_jquery aliran air terjun-tutorial js-php.cn

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.

Label berkaitan：

jquery 瀑布流

sumber：php.cn

Artikel sebelumnya：JS serasi dengan penyemak imbas arus perdana untuk menyalin kandungan ke kemahiran clipboard_javascript Artikel seterusnya：js untuk melaksanakan kemahiran calling_javascript fungsi merentas halaman iframe

Kenyataan Laman Web ini

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 terbaru oleh pengarang