JavaScript의 폭포 흐름 적응 구현에 발생하는 문제 및 솔루션

저자：Eve Cole 업데이트 시간：2025-06-01 20:16:01

나는 요즘 에이미 교사의 자바 스크립트를 사용하여 폭포 흐름을 구현하는 것을 보았으므로 코드를 따라 갔다. 이렇게 쓰는 것은 처음으로로드 할 때 화면에만 적응할 수 있으며 창 크기를 변경할 수는 없습니다.

그래서 나는 Window.onresize를 사용하여 폭포 흐름 기능을 신선하게로드하여 목표를 달성 할 것을 생각했습니다.

코드 사본은 다음과 같습니다.

Window.onload = function () {

// 폭포 흐름 기능

폭포 ( '내용', '상자');

// 데이터로드 시뮬레이션

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 "}]}

// 화면 크기가 변경되면 폭포 흐름 함수가 다시 적응됩니다.

Window.onResize = function () {

// Waterfall ( 'content', 'box');

settimeout (function () {Waterfall ( 'content', 'box');}, 200);

}

window.onscroll = function () {

if (checkscroll ()) {

var Outdoor = document.getElementById ( 'content');

// 스테인진 데이터를 HTML에 추가합니다

for (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);

}

폭포 ( '내용', '상자');

}

화면이 줄어드면 괜찮지 만 축소에서 버그가 나타납니다.

나는 다음 몇 개의 열의 맨 위가 다시 올 수 없다는 것을 알지 못했습니다.

그래서 나는 개발 도구를 열어 무슨 일이 있었는지 확인했습니다.

5 번째 Div에는 스타일이 없어야합니다. 그것이 줄어들 때 추가 되었기 때문에 확대되었고 그것을 지우지 않았으므로 유지되면 나타납니다. 그래서 : 나는 폭포 흐름 함수에 abox [i] .style.csstext = ''를 추가했습니다. 내가 들어올 때마다 나는 스타일을 지우도록

코드 사본은 다음과 같습니다.

기능 폭포 (부모, 상자) {

// 컨텐츠에서 모든 클래스 상자를 꺼냅니다

var aparent = document.getElementById (부모);

var abox = getBclass (aparent, box);

// 상자 너비를 가져옵니다

var aboxw = abox [0] .offsetWidth;

// 브라우저의 너비를 사용하여 상자 너비를 나누어 열 수를 얻습니다.

var cols = math.floor (document.documentElement.clientWidth/aboxw);

// 컨텐츠의 너비와 중심을 설정합니다

aparent.style.csstext = '너비 :'+aboxw*cols+'px; 높이 : 자동; 위치 : 상대; 마진 : 0 자동; 패딩 권리 : 15px ';

// 각 열에 대한 높이 배열을 만듭니다

var harr = [];

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

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

if (i <cols) {

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

}또 다른{

var minh = math.min.apply (null, harr);

var index = getMinIndex (Harr, Minh); // 높이가 가장 짧은 인덱스 값을 찾으십시오

//console.log(aboxw);

abox [i] .style.position = '절대';

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

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

harr [index]+= abox [i] .offsetheight;

}

이것은 수축 후 반환 할 수없는 버그를 해결하고 정상적으로 적응할 수 있습니다.

마지막으로, 나는 전체 JavaScript를 게시했습니다

코드 사본은 다음과 같습니다.

Window.onload = function () {

// 폭포 흐름 기능

폭포 ( '내용', '상자');

// 데이터로드 시뮬레이션

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 "}]}

// 화면 크기가 변경되면 폭포 흐름 함수가 다시 적응됩니다.

Window.onResize = function () {

// Waterfall ( 'content', 'box');

settimeout (function () {Waterfall ( 'content', 'box');}, 200);

}

window.onscroll = function () {

if (checkscroll ()) {

var Outdoor = document.getElementById ( 'content');

// 스테인진 데이터를 HTML에 추가합니다

for (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);

}

폭포 ( '내용', '상자');

}

기능 폭포 (부모, 상자) {

// 컨텐츠에서 모든 클래스 상자를 꺼냅니다

var aparent = document.getElementById (부모);

var abox = getBclass (aparent, box);

// 상자 너비를 가져옵니다

var aboxw = abox [0] .offsetWidth;

// 브라우저의 너비를 사용하여 상자 너비를 나누어 열 수를 얻습니다.

var cols = math.floor (document.documentElement.clientWidth/aboxw);

// 컨텐츠의 너비와 중심을 설정합니다

aparent.style.csstext = '너비 :'+aboxw*cols+'px; 높이 : 자동; 위치 : 상대; 마진 : 0 자동; 패딩 권리 : 15px ';

// 각 열에 대한 높이 배열을 만듭니다

var harr = [];

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

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

if (i <cols) {

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

}또 다른{

var minh = math.min.apply (null, harr);

var index = getMinIndex (Harr, Minh); // 높이가 가장 짧은 인덱스 값을 찾으십시오

//console.log(aboxw);

abox [i] .style.position = '절대';

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

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

harr [index]+= abox [i] .offsetheight;

}

// 클래스에 따라 요소를 얻습니다

함수 getBclass (부모, classname) {

var boxarr = new Array (); // 획득 된 클래스를 저장하는 데 사용됩니다

//console.log(parent.prototype);

대립 표시 = parent.getElementSyTagName ( '*');

for (var i = 0; i <allement.length; i ++) {

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

boxarr.push (대립 유도 [i]);

}

복귀 Boxarr;

}

// 가장 짧은 색인 값을 찾으십시오

함수 getMinIndex (arr, value) {

for (var i in arr) {

if (arr [i] == value) {

반환 i;

}

// 휠 슬라이딩이 참인지 아닌지 여부를 감지하는 함수를 만듭니다.

함수 checkscroll () {

var Outdoor = document.getElementById ( "Content");

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;

}

CSS 파일 과 함께 게시되었습니다

코드 사본은 다음과 같습니다.

*{마진 : 0; 패딩 : 0;}

바디 {배경색 : #eee;}

.콘텐츠{

위치 : 상대;

}

.상자{

패딩 : 15px 0 0 15px;

플로트 : 왼쪽;

}

.pic {

패딩 : 10px;

국경 : 1px Solid #CCC;

Box-Shadow : 0 0 5PX #CCCCCCC;

Border-Radius : 5px;

배경 : #ffff;

}

.pic img {

너비 : 220px;

높이 : 자동;

국경 : 1px Solid #eee;

}

HTML 파일 에 게시되었습니다

코드 사본은 다음과 같습니다.

<! doctype html>

<html>

<헤드>

<title> JavaScript 폭포 흐름 </title>

</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>

좋아요, 시청해 주셔서 감사합니다. 나는 전에 기술 공유 기사를 작성한 적이 없습니다. 당신이 수정할 수 있기를 바랍니다. 프론트 엔드를 배우는 작은 초보자는 Y를 제공합니다 (^_^) y