ホームページ > 記事 > ウェブフロントエンド > javascript_javascript スキルでウォーターフォールフロー適応を実装する際に遭遇する問題と解決策

javascript_javascript スキルでウォーターフォールフロー適応を実装する際に遭遇する問題と解決策

WBOYオリジナル: 2016-05-16 16:17:261170ブラウズ

ここ数日間、私はエイミー先生による JavaScript を使用したウォーターフォールフローの実装を見て、それに応じてコードを入力しました。このように書くと、初回ロード時にのみ画面に適応できることがわかり、将来ウィンドウサイズを変更するときに適応できないことがわかりました。

そこで、window.onresize を使用してウォーターフォールフロー関数をリロードして目標を達成することを考えました。

コードをコピーしますコードは次のとおりです:

window.onload=function(){

//ウォーターフォールフロー関数

ウォーターフォール('コンテンツ','ボックス');

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

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

//画面サイズが変更された場合、再調整の効果を得るためにウォーターフォールフロー関数を再実行します

window.onresize=function(){

// ウォーターフォール('コンテンツ','ボックス');

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

}

window.onscroll=function(){

if(checkScroll()){

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

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

for(var i=0;i
var obox = document.createElement("div");

obox.className = "ボックス";

oparent.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);

}

ウォーターフォール('コンテンツ','ボックス');

}

}

}

画面をズームアウトすると動作しますが、ズームアウトからズームインするとバグが発生します

次の列の上部は返せないことがわかりましたか?
そこで、何が起こっているのかを確認するために開発ツールを開いてみました。

3 番目、4 番目、5 番目の div にはスタイルがないはずです。これらはズームアウト時に追加されたものですが、ズームインしてもクリアされないため、保持されている場合は次のようになります。 aBox[i].style.cssText =''; という文は、入力されるたびに style

をクリアします。

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

関数ウォーターフォール(親,ボックス){

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

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; margin:0 auto;padding-right:15px';

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

var hArr=[];

for(var i=0; i
aBox[i].style.cssText ='';

if(i
hArr.push(aBox[i].offsetHeight);
}その他{

var minH = Math.min.apply(null,hArr);

varindex = 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[インデックス] =aBox[i].offsetHeight;

}

}

}

縮小後に元に戻れないバグが解決し、正常に適応できるようになりました

ついに

JavaScript 全体を投稿しました

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

window.onload=function(){

//ウォーターフォールフロー関数

ウォーターフォール('コンテンツ','ボックス');

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

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

//画面サイズが変更された場合、再調整の効果を得るためにウォーターフォールフロー関数を再実行します

window.onresize=function(){

// ウォーターフォール('コンテンツ','ボックス');

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

}

window.onscroll=function(){

if(checkScroll()){

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

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

for(var i=0;i
var obox = document.createElement("div");

obox.className = "ボックス";

oparent.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(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; margin:0 auto;padding-right:15px';

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

var hArr=[];

for(var i=0; i
aBox[i].style.cssText ='';

if(i
hArr.push(aBox[i].offsetHeight);
}その他{

var minH = Math.min.apply(null,hArr);

varindex = 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[インデックス] =aBox[i].offsetHeight;

}

}

}

//クラスに基づいて要素 
 を取得します
function getBclass(親,クラス名){

var boxarr = new Array() //取得したクラスを格納するために使用されます
//console.log(parent.prototype);

AllElement=parent.getElementsByTagName('*');

for(var i=0;i
If(allElement[i].className == className){

boxarr.push(allElement[i]);

}

}

リターンボックスarr;

}

//最も高いインデックス値と最も短いインデックス値を検索します

function getMinIndex(arr,value){

for(arr の変数 i){

If (arr[i]==value){

return i;

}

}

}

//ホイールのスライドが確立されているかどうかを検出し、true または false を返す関数を作成します

関数 checkScroll(){

var oparent = document.getElementById("コンテンツ");

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

var lastoBoxTop = oBox[oBox.length-1].offsetTop Math.floor(oBox[oBox.length-1].offsetHeight/2);

//console.log(lastoBoxTop);

varscrollTop = document.body.scrollTop||document.documentElement.scrollTop;

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

//console.log(scrollTop);

Return(lastoBoxTop
}

css ファイル投稿済み

コードをコピーしますコードは次のとおりです:

*{マージン: 0;パディング: 0;}

ボディ{背景色: #eee;}

.content{ 

位置: 相対;

}

.box{

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

float: 左;

}

.pic{

パディング: 10px;

枠線: 1 ピクセルの実線 #ccc;

ボックスシャドウ: 0 0 5px #CCCCCC;

境界線の半径: 5px;

背景: #fff;

}

.pic img{

幅: 220px;

高さ: 自動;

枠線: 1 ピクセルの実線 #eee;

}