ウォーターフォールフローレイアウトの解析：JS絶対配置実装_JavaScriptスキル

絶対位置指定によるウォーターフォール レイアウト:

1. レイアウト

1. ブロックボックスを囲むコンテナ:

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

... ...

2.ブロックボックス:

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

div>



3. 最初の行/5 つのブロック ボックスを初期化します:

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

padding: 15px 0 0 15px;

float: left;}
.box{
パディング: 10px ;
border:1px ソリッド #ccc;}
.box img{
width:192px;
height:auto;}



効果:

2. アイデア:

1. 親メインのスタイルを水平方向に中央揃えに設定します。 2. 各ブロック ボックス ピンのスタイルを設定します: 絶対位置。

3. ウィンドウスクロールイベントのリスニング機能を設定します。データを読み取り、ブロックボックスを追加します。

JS 実装:

1-①: 親 oParent を取得します: 1-②: 関数 getClassObj() を作成します - 親 ID とブロック ボックス クラス名を通じてブロック ボックスを含む配列を取得します。

コードをコピーします コードは次のとおりです。 var oParent=document.getElementById('main '); // 親オブジェクト

var aPin=getClassObj(oParent,pin);// ストレージ ブロック ボックスのピンの配列を取得します aPin

var num=Math.floor(document.documentElement.clientWidth/aPin[0 ].offsetWidth ); // Get - 各行に収容できるブロック ボックスの数 - num [ウィンドウの幅をブロック ボックスの幅で割ったもの]

oParent.style.cssText='width:' iPinW*num 'px;margin:0 auto;';//cssText 属性を使用して、親 main に中央揃えのスタイルを追加します: 固定幅の自動水平マージン

コードをコピー コードは次のとおりです。function getClassObj(parent, className){

var obj=parent.getElementsByTagName('*');//親のすべてのサブセットを取得します

var pinS=[];//className
の要素を格納する配列を作成します ( var i = 0; i＆lt; obj.length; i）{//サブセットをトラバースし、アレイ
];
};
return pins;} block box acin [i]では、最初の num 個のブロック ボックスを配列 pinHArr に代入し、1 行に収まるブロック ボックスの数 num を超えるブロック ボックスを絶対配置します。
2-③: 作成関数 getminHIndex() を使用して、配列の最小値を返します

コードをコピー


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

var pinHArr=[];//各列のすべてのブロック ボックスの合計の高さを格納するために使用されます [この配列の長さは列数によっても変化します]
for(var i=0 ;i var pinH=aPin[i].offsetHeight;// 配列 aPin の i 番目のブロック ボックスの可視性を取得しますwidth offsetHeight
if(i pinHArr[i]=pinH; //最初の行の num 個のブロック ボックス aPin が最初に配列 pinHArr
}else{
var minH=Math.min.apply(null,pinHArr);//配列 pinHArr の最小値 minH
を計算します var minHIndex=getminHIndex(pinHArr,minH);//作成された getminHIndex を通じて最小値 minH を取得します()- 配列 pinHArr 内のインデックス minHIndex
aPin[i].style.position='absolute';//絶対変位を設定します
aPin[i].style.top=minH 'px';
aPin[ i] .style.left = apin [minhindex] .ofSetLeft 'px'; // 配列の配列内の最小上位要素の Apin [i] ブロック
Pinharr [minhindex] = apin [i ]. //ブロックボックスを追加した後に列の高さを更新します コードは次のとおりです:


function getminHIndex(arr,minH){

for(var i in arr){
if(arr[i]==minH)return i;

} } 3: ウィンドウ スクロール イベントのリスニング関数を設定します: データを読み取り、ブロック ボックスを追加します。 。

コードをコピー


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

var dataInt={'data':[ {'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src': 'g ( 4).jpg'}]};// 一時データ オブジェクト
// 以下にウィンドウ スクロール イベント リスニング関数を定義します
window.onscroll=function(){

if(checkscrollside() ){ var oParent=document.getElementById('main');// 親オブジェクト for(var i=0;i var oPin=document. createElement( 'div'); // 要素ノード Pin の追加を作成します Opin.className = 'Pin' // クラス名属性を追加します var oBox=document; .createElement('div'); oBox.className='box';

oPin.appendChild(oBox); 子ノード img

oImg.src='./images/' dataInt を作成して追加します。 data[i].src;
oBox.appendChild(oImg);
Waterfall('main', 'pin');//①②を関数waterfall()にカプセル化し、追加したノードを追加して配置します文書。
};

function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin .length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);//[追加されたブロック ボックス関数 Waterfall() をトリガーする] の高さを作成します: 最後のブロック ボックスの距離Web ページ自体の上部から 高さの半分 (下部までスクロールする前にロード可能)
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;//互換性の解決に注意してください
var documentH=document.documentElement.clientHeight;/ /Window height
return (lastPinH }

3. 最終効果:

4. 概要: これは、自分の考えを整理するためのものであり、あまり慎重かつ一貫した表現ではなく、参考のみを目的としています。

5. 完成した html ファイルと js ファイル:

html:index.html

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

< ;style type="text/css">
*{padding: 0;margin:0;}
#main{
位置: 相対;
}
.pin{
パディング: 15px 0 0 15px;
float:left;
}
.box{
パディング: 10px;
border:1px Solid #ccc;
ボックスシャドウ: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
;

gt;

> ;

gt;

gt;

< ;/div>

js：waterfall.js 1 window.onload=function() {

复制代码代码如下:

waterfall('main','pin');
var dataInt={'data':[{'src':'g (1).jpg'},{'src':' g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};

window.onscroll = Function () {
if (CheckscrollSide ()) {
var oparent = document.GetelementByid ('Main') // 親レベルのオブジェクト
for (var I = 0; data; datait) .data .length;i ){
var oPin=document.createElement('div') //要素ノードを追加
.appendChild (oPin); 🎜> var oImg =document.createElement('img') ;
oImg.src='./images/' dataInt.data[i].src;
oBox.appendChild(oImg);
}
ウォーターフォール ('main','pin') ;
};
}

}
/*
親 ID
ピン要素 ID
*/
function Waterfall(parent,pin){
var oParent=document.getElementById(parent);// 親オブジェクト
var aPin=getClassObj(oParent,pin);// ブロックボックスのピンを格納する配列を取得 aPin
var iPinW=aPin[ 0].offsetWidth;//ブロックフレームピンの幅
var num=Math.floor(document.documentElement.clientWidth/iPinW);//各行に収容できるピン数 [ウィンドウ幅を割った値]ブロック ボックスの幅]
oParent.style.cssText='width:' iPinW*num 'px;ma rgin:0 auto;';//親の中央揃えスタイルを設定します: 固定幅自動 水平マージン

var pinHArr=[];//各列のすべてのブロック ボックスの合計高さを格納するために使用されます。
for(var i=0;i var pinH=aPin[i].offsetHeight;
if(i                                                                                                                                                                           through num through to use use using use using using using so so so so so so so so so so so so so so so so so so to so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so long so so so so so so long so so so so so so so so so so so so so so so so so so so so so so so so pinHArr);//The minimum value minH
in the array pinHArr var minHIndex=getminHIndex(pinHArr,minH);
aPin[i].style.position='absolute';//Set the absolute displacement
[i].style.top=minH 'px';
                                          aPin[i].style.left=aPin[minHIndex].offsetLeft 'px'; [i] Block box height
            pinHArr[minHIndex] = aPin[i].offsetHeight;//Update the column height after adding the block box                                                                                                                                                  . **
*Get the array of child elements of the same type through the class of the parent and child elements
*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//Get all subsets of the parent
var pinS=[];/ /Create an array to collect sub-elements
                                                                                                                                                                     ​className==className){
                                                                                                                                                         🎝>*/
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}


function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);//Create the height of [triggering the adding block box function waterfall()]: the last block The distance between the box and the top of the webpage is half of its height (to start loading before scrolling to the bottom)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Pay attention to solving compatibility
var documentH=document .documentElement.clientHeight;//Page height
return (lastPinH }