ネイティブ JavaScript LESS はウォーターフォール flow_javascript スキルを実装します

HTML (js 呼び出しを容易にするためにパッケージの関係に注意してください)

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

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 

LESS(レス预编译)

复制代 代码如下:

 * {
     マージン: 0;
     パディング: 0;
 }
 #main {
     位置: 相対;
 
 }
 .box {
     パディング:15px 0 0 15px;
     float:left;
 }
 .pic {
     パディング: 10px;
     境界線: 1px 実線 #ccc;
     境界半径: 5px;
     ボックスシャドウ: 0px 0px 5px #ccc;
     img {
         幅:165px;
         高さ:自動;
     }
 }

JavaScript(自己理解的注解)

(関数数存在一定瑕疵,仅用学习理解)

复制代码代码如下:

window.onload = function () {
ウォーターフォール("メイン","ボックス");
// カスタム関数を呼び出して、main の各ボックス要素に作用します;
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
// json データをシミュレートします;
Window.onscroll = function () {
if (checkScrollSlide) {
// カスタム関数を呼び出します。関数の戻り値に基づいてスクロールが範囲外かどうかを判断します。
var oParent = document.getElementById("main");
for (var i = 0; i var oBox = document.createElement("div");
oBox.className = "ボックス";
oParent.appendChild(oBox);
//ボックスブロックを作成
var oPic = document.createElement("div");
oPic.className = "写真"; oBox.appendChild(oPic);
//写真ブロックを作成
var oImg = document.createElement("img");
//img要素を作成
oImg.src = "images/" dataInt.data[i].src;
//画像参照を設定します;
oPic.appendChild(oImg);
};
ウォーターフォール("メイン","ボックス");
// 動的に生成されたデータ ブロックをストリーミング方式でレイアウトします。
};
};
};
//ストリーミング レイアウトの主な機能。データ ブロックの位置を自動的に調整します。
関数ウォーターフォール (親,ボックス) {
// main の下にあるすべてのボックス要素を取り出します。「parent」は親を表し、box はボックス要素を表します。 var oParent = document.getElementById(parent);
//親要素を変数 oParent;
に代入します。 var oBoxs = getByClass(oParent,box);
// カスタム関数を通じて、親の下の各ボックス要素を取得します。取得するのはすべてのボックス要素のコレクションです。 //取得したボックス要素のセットを再度 oBox に割り当てます (スコープの問題のため、変数は共有されません);
// console.log(oBoxs.length);
//デバッグのためにコンソールにボックス要素の数を出力します;
var oBoxW = oBoxs[0].offsetWidth;
//各列の幅を計算します。offsetWidth はパディングを含む幅です。 // コンソール.log(oBoxW); var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//ページ全体に表示される列数(ページ幅/ボックス幅)を計算します;
oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
// 親要素の幅 main = 各列の幅 * 列の数、左右の中央に配置されます。 var hArr = [];
//各列の高さを格納する配列;
for (var i = 0; i // oBoxs 配列を走査します;
If (i // 最初の行の最初の列が
であるという条件は次のとおりです。hArr.push(oBoxs[i].offsetHeight);
//各列の高さを取得して配列に代入します;
}その他{
//ここのボックス要素は最初の行の要素ではなくなりました;
var minH = Math.min.apply(null,hArr);
//最初の行の最小の高さを取得して変数に代入します;
// console.log(minH);
varindex = getMinhIndex(hArr,minH);
//カスタム関数を呼び出して、この変数のインデックス値を取得します;
oBoxs[i].style.position = "絶対";
oBoxs[i].style.top = minH "px";
oBoxs[i].style.left = oBoxW*index "px";
// 現在の要素の位置を設定します;
// 現在の要素の左の値 = 上の要素のインデックス値 * 各列の幅
//oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
// 2 番目の方法は、現在の要素の左の値を取得することです;
//このとき、インデックス列にボックス要素が追加されます;
hArr[index] =oBoxs[i].offsetHeight;
//更新された各列の高さ = 各列の元の高さと後で追加されたボックス要素の高さ;
};
};
};
//JS はクラスを通じて要素をネイティブに取得します;
function getByClass (parent,claName) {
//クラスを通じて要素を取得します (親のコンテナーの下にある claName の要素を取得します;)
var boxArr = new Array();
//取得したすべての要素を格納する配列をクラス box;
で宣言 var oElements =parent.getElementsByTagName("*")
//この親要素の下にすべての子要素を格納する変数を宣言します (*);
for (var i = 0; i // 配列 oElements;
を走査します。 If (oElements[i].className==claName) {
//配列内の要素の calss クラスがパラメータ claName と同じ場合;
boxArr.push(oElements[i]);
// 走査されたボックス要素を boxArr 配列に分類します;
};
};
返却ボックスArr;
// 配列を呼び出した後、一連の関数を通過し、取得した配列を呼び出し元の関数に返します。 };
//配列要素のインデックス値を取得します;
function getMinhIndex (arr,val) {
//arr は親配列、
は現在の要素です。 for(arr の変数 i){
// 0 からトラバースを開始;
If(arr[i]==val){
//配列内の現在の要素に対応するインデックス値を検索します;
return i;
//関数の戻り値は現在の要素のインデックス値です;
};
};
};
//ローリングデータブロックロードの条件が満たされているかどうかを確認します;
関数 checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
// ページの上部からの最後のボックス要素の高さ (最後のボックス (oBoxs.length-1) の offsetTop を見つけます) の半分
varscrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//ブラウザのスクロールバーのスクロール距離;
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//ブラウザのビューポートの高さ;
// console.log(height);
Return (lastBoxH //ページのスクロール距離が最後のボックス要素の offsetTop より大きいかどうか;
};

概要:

写真を表示するにはウォーターフォールフローを使うのが一番です。以下はウォーターフォールフローの実装方法です(各行の長さはブラウザウィンドウの長さと同じです)。これはcss3でも実装できます。非常に簡単です。Google で検索するとわかります。
私のアイデアは、この行の画像のアスペクト比が変更されず、高さが 250 未満になったときに、サイクルが完了する、つまりこの行が挿入される、というものです。
次に、次のループに入り、次の行を挿入します。