Masalah dan solusi yang dihadapi dalam mengimplementasikan adaptasi aliran air terjun oleh JavaScript

Penulis：Eve Cole Waktu Pembaruan：2025-06-01 20:16:01

Saya telah melihat Guru Amy menggunakan JavaScript untuk mengimplementasikan aliran air terjun hari ini, jadi saya mengikuti kode tersebut. Saya menemukan bahwa menulis seperti ini hanya dapat beradaptasi dengan layar saat memuat untuk pertama kalinya, dan kemudian mengubah ukuran jendela tidak akan dapat beradaptasi.

Jadi saya berpikir untuk menggunakan window. Menghibur untuk membuat fungsi aliran air terjun yang baru dimuat untuk mencapai tujuan.

Salinan kode adalah sebagai berikut:

window.onload = function () {

// fungsi aliran air terjun

air terjun ('konten', 'kotak');

// Simulasi pemuatan data

var Dataint = {"data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}

// Ketika ukuran layar berubah, fungsi aliran air terjun akan diadaptasi ulang.

window.onresize = function () {

// air terjun ('konten', 'kotak');

setTimeout (function () {waterfall ('content', 'box');}, 200);

}

window.onscroll = function () {

if (checkscroll ()) {

var outdoor = document.geteLementById ('konten');

// Tambahkan data yang diwarnai ke dalam HTML

untuk (var i = 0; i <dataint.data.length; i ++) {

var obox = document.createelement ("div");

obox.classname = "box";

Outdoor.AppendChild (OBOX);

var opic = document.createElement ("div");

opic.classname = "pic";

Obox.AppendChild (OPIC);

var oimg = document.createElement ("img");

oimg.src = "img/"+dataint.data [i] .src;

Opic.AppendChild (OIMG);

}

air terjun ('konten', 'kotak');

}

Tidak apa-apa saat layar berkurang, tetapi bug muncul dari zoom-in

Saya tidak melihat bahwa bagian atas beberapa kolom berikutnya tidak dapat kembali.

Jadi saya membuka alat pengembangan untuk melihat apa yang terjadi.

Seharusnya tidak ada gaya di Div ke -5. Itu karena ditambahkan ke dalamnya ketika menyusut, tetapi diperbesar dan tidak membersihkannya, jadi itu akan muncul jika dipertahankan. Jadi: Saya menambahkan kalimat abox [i] .style.csstext = '' ke fungsi aliran air terjun; Sehingga setiap kali saya masuk, saya membersihkan gayanya

Salinan kode adalah sebagai berikut:

fungsi air terjun (induk, kotak) {

// Keluarkan semua kotak kelas di bawah konten

var aparent = document.geteLementById (induk);

var abox = getBclass (aparent, box);

// Dapatkan lebar kotak

var aboxw = abox [0] .offsetWidth;

// Gunakan lebar browser untuk membagi lebar kotak untuk mendapatkan jumlah kolom

var cols = math.floor (document.documentelement.clientwidth/aboxw);

// atur lebar dan pusat konten

aparent.style.csstext = 'width:'+aboxw*cols+'px; tinggi: auto; posisi: relatif; Margin: 0 Auto; Padding-Right: 15px ';

// Buat array tinggi untuk setiap kolom

var harr = [];

untuk (var i = 0; i <abox.length; i ++) {

abox [i] .style.csstext = '';

if (i <cols) {

harr.push (abox [i] .offsetheight);

}kalau tidak{

var minh = Math.min.Amply (null, harr);

indeks var = getMinIndex (Harr, MinH); // Cari tahu nilai indeks dengan ketinggian terpendek

//console.log(aboxw);

abox [i] .style.position = 'absolute';

abox [i] .style.top = minh+'px';

abox [i] .style.left = aboxw*index+'px';

Harr [index]+= abox [i] .offsetHeight;

}

Ini memecahkan bug yang tidak dapat dikembalikan setelah menyusut, dan dapat beradaptasi secara normal

Akhirnya, saya memposting seluruh javascript

Salinan kode adalah sebagai berikut:

window.onload = function () {

// fungsi aliran air terjun

air terjun ('konten', 'kotak');

// Simulasi pemuatan data

var Dataint = {"data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}

// Ketika ukuran layar berubah, fungsi aliran air terjun akan diadaptasi ulang.

window.onresize = function () {

// air terjun ('konten', 'kotak');

setTimeout (function () {waterfall ('content', 'box');}, 200);

}

window.onscroll = function () {

if (checkscroll ()) {

var outdoor = document.geteLementById ('konten');

// Tambahkan data yang diwarnai ke dalam HTML

untuk (var i = 0; i <dataint.data.length; i ++) {

var obox = document.createelement ("div");

obox.classname = "box";

Outdoor.AppendChild (OBOX);

var opic = document.createElement ("div");

opic.classname = "pic";

Obox.AppendChild (OPIC);

var oimg = document.createElement ("img");

oimg.src = "img/"+dataint.data [i] .src;

Opic.AppendChild (OIMG);

}

air terjun ('konten', 'kotak');

}

fungsi air terjun (induk, kotak) {

// Keluarkan semua kotak kelas di bawah konten

var aparent = document.geteLementById (induk);

var abox = getBclass (aparent, box);

// Dapatkan lebar kotak

var aboxw = abox [0] .offsetWidth;

// Gunakan lebar browser untuk membagi lebar kotak untuk mendapatkan jumlah kolom

var cols = math.floor (document.documentelement.clientwidth/aboxw);

// atur lebar dan pusat konten

aparent.style.csstext = 'width:'+aboxw*cols+'px; tinggi: auto; posisi: relatif; Margin: 0 Auto; Padding-Right: 15px ';

// Buat array tinggi untuk setiap kolom

var harr = [];

untuk (var i = 0; i <abox.length; i ++) {

abox [i] .style.csstext = '';

if (i <cols) {

harr.push (abox [i] .offsetheight);

}kalau tidak{

var minh = Math.min.Amply (null, harr);

indeks var = getMinIndex (Harr, MinH); // Cari tahu nilai indeks dengan ketinggian terpendek

//console.log(aboxw);

abox [i] .style.position = 'absolute';

abox [i] .style.top = minh+'px';

abox [i] .style.left = aboxw*index+'px';

Harr [index]+= abox [i] .offsetHeight;

}

// Dapatkan elemen menurut kelas

fungsi getBclass (induk, classname) {

var boxarr = array baru (); // Digunakan untuk menyimpan kelas yang diperoleh

//console.log(parent.prototype);

allelement = parent.geteLementsbyTagname ('*');

untuk (var i = 0; i <allelement.length; i ++) {

if (allelement [i] .className == className) {

boxarr.push (allelement [i]);

}

Boxarr return;

}

// Cari tahu nilai indeks terpendek

fungsi getMinIndex (arr, value) {

untuk (var i in arr) {

if (arr [i] == nilai) {

Kembalikan i;

}

// Buat fungsi yang mendeteksi apakah geser roda benar atau tidak dan mengembalikan benar atau salah

function checkscroll () {

var outdoor = document.geteLementById ("konten");

var obox = getBclass (oparent, 'box');

var lastoboxtop = OBOX [OBOX.Length-1] .Offsettop+Math.floor (OBOX [OBOX.Length-1] .OffsetHeight/2);

//console.log(lastoboxtop);

var scrolltop = document.body.scrolltop || document.documentelement.scrolltop;

var height = document.body.clientHeight || document.documentelement.clientHeight;

//console.log(scrolltop);

return (lastoboxtop <scrolltop+height)? true: false;

}

Diposting dengan file CSS

Salinan kode adalah sebagai berikut:

*{margin: 0; padding: 0;}

tubuh {latar belakang-warna: #eee;}

.isi{

Posisi: kerabat;

}

.kotak{

padding: 15px 0 0 15px;

float: kiri;

}

.pic {

padding: 10px;

Perbatasan: 1px solid #ccc;

Kotak-Shadow: 0 0 5px #CCCCCCCC;

Border-Radius: 5px;

Latar Belakang: #FFFF;

}

.pic img {

Lebar: 220px;

Tinggi: otomatis;

Perbatasan: 1px solid #eee;

}

Diposting di file html

Salinan kode adalah sebagai berikut:

<! Doctype html>

<Html>

<head>

<title> Aliran Air Terjun JavaScript </iteme>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

Oke, terima kasih telah menonton. Saya belum pernah menulis artikel berbagi teknis sebelumnya. Ada banyak aspek yang tidak pengertian yang saya harap dapat Anda perbaiki. Para pemula kecil yang mempelajari ujung depan memberikan y (^_^) y