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

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

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

ここ数日間、私はエイミー先生による 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;
}

html ファイル投稿

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



   
       
        javascript瀑布流
       
       
   
   
       

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

           

               

               
               

           

       

        
   

大家の意見を歓迎します、以前は技術共有文書を書かなかった、多くの不遠な場所で大家が多くの指示をすることができることを望んでいます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。