検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Pure js はウォーターフォール フロー レイアウトを実装し、ajax は data_javascript スキルを動的に追加します

Pure js はウォーターフォール フロー レイアウトを実装し、ajax は data_javascript スキルを動的に追加します

WBOY
WBOYオリジナル
2016-05-16 15:06:151581ブラウズ

この記事では、純粋な JS コードを使用してウォーターフォール フロー Web ページ効果を手書きし、最初に基本的なウォーターフォール フロー レイアウトを実現し、最後までスクロールした後に新しい画像関数を読み込む Ajax データをシミュレートします。

欠点:

1. プログラムは応答せず、リアルタイムでページ幅を調整できません。

2. ajax シミュレーション データの画像をプログラムに追加すると、ページ全体のすべての画像の位置が変更されます。

3. プログラムは、画像サイズを読み取る前に、すべての画像がロードされるのを待ちます。

4. 実際のプロジェクトでは、画像のサイズ値はバックグラウンド プログラムによって指定され、画像の width 属性は js コード内で直接使用される必要があります。

このプログラムのアイデア:

html 構造: 


<body>
  <div id="container">
    <div class="box">
      <div class="box_img">
        <img src="img/1.jpg" />
      </div>
    </div>
    <div class="box">
      <div class="box_img">
        <img src="img/2.jpg" />
      </div>
    </div>
    ...
  </div>
</body>

1. 初期化レイアウト

1. #container をposition:relative;に設定します

2. .box を float:left;

に設定します。

3. Web ページが読み込まれた後、すべての画像を配置します。

3.1 画像の幅は固定されており、現在のページの各行に収容できる画像の数 num を計算し、#container の幅を取得し、ページを中央に配置します。

3.2 すべての画像をループします。最初の num 個の画像はデフォルトで最初の行としてフロート レイアウトになり、配列 BoxHeightArr = [];

に保存されます。

3.3 最初の行のレイアウトが完了したら、次の画像を配置し、BoxHeightArr[] を更新します:

3.3.1 最初の行(position:absoluteを使用した位置)、つまりBoxHeightArr[]の高さが最も小さい列の最も短い画像の下に次の画像を配置し、次の数値のインデックス値を記録します: minIndex ;

3.3.2 BoxHeightArr[]の最小値を更新(BoxHeightArr[minIndex]+現在の画像の高さ);

3.4 すべての写真が配置されるまでステップ 3.3 を繰り返します

2. スクロールの高さをリアルタイムで監視し、新しいデータをロードするかどうかを決定します

1. 初期化が完了したら、上から最後の画像の高さを取得します: lastContentHeight

2. window.onscroll = function(){...}

を使用します。

現在のページのスクロールの高さのリアルタイム監視は次のとおりです:scrollTop

現在のページ ウィンドウの高さのリアルタイム監視: pageHeight

3. ページが lastContentHeight

3. ページの下部にある新しいコンテンツ

1. ループを使用して新しい画像コンテナを作成し、それを一番下に追加し、json データ内のパスやその他の情報などの対応する画像データをコンテナに書き込むと、画像の追加が完了します。

2. すべての新しい画像を追加した後、ページ全体のすべての画像とレイアウトに対して手順 1 の初期化操作を再実行します。

プロジェクトフォルダー:

index.html: 画像データを事前に配置


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script src="js/app.js"></script>
  <title>JavaScript瀑布流</title>
 </head>
 <body>
  <div id="container">
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
  
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
   
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/8.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/9.jpg"/>
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/10.jpg"/>
    </div>
   </div>
  </div>
 </body>
</html>
style.css:

*{
 margin: 0;
 padding: 0;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
}
.box_img{
 padding: 5px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 150px;
 height: auto;
}
app.js:


window.onload = function(){
 imgLocation("container", "box");
 //ajax模拟数据
 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]}
 
 window.onscroll = function(){
  if(checkFlag()){ //判断是否到底部要加载新的数据
   var cparent = document.getElementById("container");
   //把ajax数据加载进页面
   for(var i=0; i<imgData.data.length; i++){
    var ccontent = document.createElement("div");
    ccontent.className="box";
    cparent.appendChild(ccontent);
    var boximg = document.createElement("div");
    boximg.className = "box_img";
    ccontent.appendChild(boximg);
    var img = document.createElement("img");
    img.src = "img/"+imgData.data[i].src;
    boximg.appendChild(img);
   }
   //把所有图片数据重新定位一次
   imgLocation("container", "box");
  }
 }
};

function checkFlag(){
 var cparent = document.getElementById("container");
 var ccontent = getChildElement(cparent, "box");
 
 //得到最后一张图距顶部的高度，滚动高度，窗口高度
 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
 console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
 
 if(lastContentHeight < scrollTop + pageHeight){
  return true;
 }
}

function imgLocation(parent, content){
 //将parent下所有的content全部取出
 var cparent = document.getElementById(parent);
 var ccontent = getChildElement(cparent, content);
 //根据当前浏览器窗口的宽度，确定每行图片数并固定，居中
 var imgWidth = ccontent[0].offsetWidth; //offsetWidth = width + padding + border
 var num = Math.floor(document.documentElement.clientWidth / imgWidth);
 cparent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto";
 //alert("pause");
 //设置一个数组，用来承载第一行的图片信息
 var BoxHeightArr = [];
 for(var i=0; i<ccontent.length; i++){
  if(i<num){
   //第一行的图片的高度记录下来
   BoxHeightArr[i] = ccontent[i].offsetHeight;
   //当ajax数据加载后，程序是将所有图片重新定位，所以第一行的图片要清除position:absolute
   ccontent[i].style.position = "static";
  }else{
   var minHeight = Math.min.apply(null, BoxHeightArr);
   var minIndex = getminheightLocation(BoxHeightArr, minHeight);
   
   //把图放在第一行图索引值最小的下面
   ccontent[i].style.position = "absolute";
   ccontent[i].style.top = minHeight+"px";
   ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
   
   //图片放好位置后更新“第一行图片信息的最小高度”，
   //然后利用for循环重复这个动作到结束
   BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
  }
 }
;}

//获取第一行图片高度最小的索引值
function getminheightLocation(BoxHeightArr, minHeight){
 for(var i in BoxHeightArr){
  if(BoxHeightArr[i] == minHeight){
   return i;
  }
 }
}

//获取所有box
function getChildElement(parent, content){
 contentArr = parent.getElementsByClassName(content);
 return contentArr;
}
レンダリング:

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

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

関連記事

続きを見る