JavaScriptで自動画像読み込みのウォーターフォールフロー効果を実装

JavaScriptで自動画像読み込みのウォーターフォールフロー効果を実装_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:06:10

オリジナル

1432 人が閲覧しました

まずレンダリングを見てみましょう:

Web ページを下にスライドすると、写真が自動的に読み込まれて表示されます。

写真を入れるボックスのモデルは次のとおりです:

　　　　<div class="box">
<div class="box_img">
<img src="Img/8.jpg">
</div>
</div>

ログイン後にコピー

img-width を 150px に設定し、box_img にパディングとシャドウ効果を追加し、ボックスの外側のマージンを 0 に設定して、パディングを追加します。ボックスの幅は img-width と margin によって引き伸ばされます。つまり、ボックス間にスペースはありませんが、ボックス内にはある程度のマージン効果があります。このように、js で位置を設定するときにマージンの問題を考慮する必要はなく、ボックスの幅を直接呼び出すだけです。

すべてのボックスを保持する div の位置を相対位置に設定します。これにより、上の値または左の値を設定するときに、最も外側のマージン属性を考慮する必要がなくなります。

画像を配置します。画像の最初の行の高さを取得し、配列に保存します。次の画像の位置を絶対値に設定し、最小の高さで画像の下に配置します。次に、上と左を設定します。配列の値と新しく配置された画像の高さを最小化します。つまり、最初に HTML に配置された画像の最初の行を除いて、他のすべての画像は js で再配置されます。

ページを一番下にスライドすると、イベント関数がトリガーされ、写真が無制限に読み込まれるようにいくつかの写真が配置されます。

HTML ファイル:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title></title>
<link rel="stylesheet" href="waterfall.css" type="text/css">
<script src="waterfall.js"></script>
</head>
<body>
<div id="content">
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
</div>
</body>
</html>

ログイン後にコピー

CSS ファイル:

*{
margin: ;
padding:;
}
#content{
position: relative;
background-color: #;
}
.box{
padding: px;
float: left;
}
.box_img{
padding: px;
border: px solid #cccccc;
box-shadow: px #cccccc;
border-radius: px;
}
img{
width: px;
height: auto;
}

ログイン後にコピー

js ファイル:

Math.floor() 関数は切り捨てが可能です。

Math.min.apply(null,heightArr); この関数は heightArr 配列の最小値を取得できます。

Window.onscroll=function(){}; この関数は、ページがスクロールされるとトリガーされます。

document.documentElement.clientHeight; ブラウザによって表示される高さ。

document.documentElement.scrollTop; スライド距離。

/**
* Created by asua on 2016/4/9.
*/
window.onload=function(){
imgLocation("content","box");
var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
window.onscroll=function(){
if(checkFlag()){
for(var i=0;i<lodeImage.Date.length;i++){
var box=document.createElement("div");
box.className="box";
var cparent=document.getElementById("content");
cparent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="Img/"+lodeImage.Date[i].src;
box_img.appendChild(img);
}
imgLocation("content","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("content");
var ccontent=getChildElement(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
if(lastContentHeight<scrollHeight+pageHeight){
return true;
}
}
function imgLocation(parent,child){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,child);
var imgwidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
var heightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
heightArr.push(ccontent[i].offsetHeight);
}else{
var minHeight=Math.min.apply(null,heightArr);
var minIndex=getMinIndex(heightArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
heightArr[minIndex]+=ccontent[i].offsetHeight;
}
}
}
function getMinIndex(heightArr,minHeight){
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}

ログイン後にコピー

はい、jsを使った自動画像読み込み用の滝の流れエフェクトコードの紹介です。お役に立てば幸いです。