検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptで自動画像読み込みのウ​​ォーターフォールフロー効果を実装_JavaScriptスキル

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

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

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

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を使った自動画像読み込み用の滝の流れエフェクトコードの紹介です。お役に立てば幸いです。

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

関連記事

続きを見る