javascriptによる滝の流れの適応を実装する際に遭遇する問題と解決策

著者：Eve Cole 更新時間：2025-06-01 20:16:01

エイミー教師が最近滝の流れを実装するためにJavaScriptを使用しているのを見てきたので、コードを追い出しました。このように書くことは、初めて読み込まれたときに画面にのみ適応することができ、ウィンドウサイズを変更しても適応できないことがわかりました。

そこで、Window.Onresizeを使用して、滝の流れを新たに機能させて目標を達成することを考えました。

コードコピーは次のとおりです。

window.onload = function（）{

//滝の流れ機能

ウォーターフォール（ 'content'、 'box'）;

//データの読み込みをシミュレートします

var datiant = {"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（）{

//ウォーターフォール（ 'content'、 'box'）;

setimeout（function（）{waterfall（ 'content'、 'box'）;}、200）;

}

window.onscroll = function（）{

if（checkscroll（））{

var outdoor = document.getElementById（ 'content'）;

//染色データをHTMLに追加します

for（var i = 0; i <datiant.data.length; i ++）{

var obox = document.createelement（ "div"）;

obox.classname = "box";

Autdoor.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）;

}

ウォーターフォール（ 'content'、 'box'）;

}

画面が減っても大丈夫ですが、ズームインからバグが表示されます

次のいくつかの列の上部が戻ってこないことがわかりませんでした。

そこで、何が起こったのかを確認するために開発ツールを開きました。

5番目のdivにはスタイルがあるべきではありません。それは縮小したときにそれに追加されたからですが、それは拡大され、それをクリアしなかったため、保持された場合に表示されます。 So：abox [i] .style.csStext = ''を滝の流れ機能に文を追加しました。私が入るたびに、私はスタイルをクリアするように

コードコピーは次のとおりです。

機能ウォーターフォール（親、ボックス）{

//コンテンツの下のすべてのクラスボックスを取り出します

var aparent = document.getElementById（parent）;

var abox = getbclass（aparent、box）;

//ボックスの幅を取得します

var aboxw = abox [0] .offsetwidth;

//ブラウザの幅を使用してボックス幅を分割して列の数を取得します

var cols = math.floor（document.documentelement.clientwidth/aboxw）;

//コンテンツの幅と中心を設定します

aparent.style.csstext = 'width：'+aboxw*cols+'px; height：auto; position：relative;マージン：0 auto; padding-right：15px ';

//各列の高さ配列を作成します

var harr = [];

for（var i = 0; i <abox.length; i ++）{

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

if（i <cols）{

harr.push（abox [i] .offseetheight）;

}それ以外{

var minh = math.min.apply（null、harr）;

var index = getminindex（harr、minh）; //最も短い高さでインデックス値を見つけます

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

}

これにより、縮小後に返されないバグが解決し、正常に適応できます

最後に、 JavaScript全体を投稿しました

コードコピーは次のとおりです。

window.onload = function（）{

//滝の流れ機能

ウォーターフォール（ 'content'、 'box'）;

//データの読み込みをシミュレートします

var datiant = {"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（）{

//ウォーターフォール（ 'content'、 'box'）;

setimeout（function（）{waterfall（ 'content'、 'box'）;}、200）;

}

window.onscroll = function（）{

if（checkscroll（））{

var outdoor = document.getElementById（ 'content'）;

//染色データをHTMLに追加します

for（var i = 0; i <datiant.data.length; i ++）{

var obox = document.createelement（ "div"）;

obox.classname = "box";

Autdoor.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）;

}

ウォーターフォール（ 'content'、 'box'）;

}

機能ウォーターフォール（親、ボックス）{

//コンテンツの下のすべてのクラスボックスを取り出します

var aparent = document.getElementById（parent）;

var abox = getbclass（aparent、box）;

//ボックスの幅を取得します

var aboxw = abox [0] .offsetwidth;

//ブラウザの幅を使用してボックス幅を分割して列の数を取得します

var cols = math.floor（document.documentelement.clientwidth/aboxw）;

//コンテンツの幅と中心を設定します

aparent.style.csstext = 'width：'+aboxw*cols+'px; height：auto; position：relative;マージン：0 auto; padding-right：15px ';

//各列の高さ配列を作成します

var harr = [];

for（var i = 0; i <abox.length; i ++）{

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

if（i <cols）{

harr.push（abox [i] .offseetheight）;

}それ以外{

var minh = math.min.apply（null、harr）;

var index = getminindex（harr、minh）; //最も短い高さでインデックス値を見つけます

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

}

//クラスに従って要素を取得します

function getBclass（parent、className）{

var boxarr = new Array（）; //取得したクラスを保存するために使用されます

//console.log(parent.prototype）;

Allelement = parent.getElementsByTagname（ '*'）;

for（var i = 0; i <ferlement.length; i ++）{

if（fellement [i] .classname == className）{

boxarr.push（allelement [i]）;

}

boxarrを返します。

}

//最短のインデックス値を見つけます

関数getMinIndex（arr、value）{

for（var i in arr）{

if（arr [i] == value）{

私を返します。

}

//ホイールのスライドが真であるかどうかを検出し、真かfals

function 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;}

body {background-color：#eee;}

。コンテンツ{

位置：相対;

}

。箱{

パディング：15px 0 0 15px;

フロート：左;

}

.pic {

パディング：10px;

ボーダー：1pxソリッド#ccc;

Box-Shadow：0 0 5px #cccccccc;

ボーダーラジウス：5px;

背景：#ffff;

}

.pic img {

幅：220px;

高さ：自動;

国境：1px solid #eee;

}

HTMLファイルに投稿されています

コードコピーは次のとおりです。

<！doctype html>

<html>

<head>

<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 （^_7）を与えますy