집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 자동 이미지 loading_javascript 기술의 폭포 흐름 효과를 구현합니다.

JavaScript는 자동 이미지 loading_javascript 기술의 폭포 흐름 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:06:101459검색

먼저 렌더링을 보여드리겠습니다.

웹페이지를 아래로 슬라이드하면 사진이 자동으로 로드되어 표시될 수 있습니다.

사진을 담을 수 있는 박스 모델은 다음과 같습니다.

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

img-width를 150px로 설정한 다음 box_img에 패딩과 그림자 효과를 추가하고 상자의 바깥쪽 여백을 0으로 설정한 다음 패딩을 추가합니다. 상자의 너비는 img-width 및 여백만큼 늘어납니다. 즉, 상자 사이에 간격이 없지만 상자 내부에는 약간의 여백 효과가 있습니다. 이렇게 하면 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를 이용한 자동 이미지 로딩을 위한 폭포 흐름 효과 코드에 대한 소개입니다. 도움이 되셨으면 좋겠습니다!

성명：

이전 기사：JS_javascript 기술로 구현된 웹 페이지의 색상 선택기다음 기사：JS_javascript 기술로 구현된 웹 페이지의 색상 선택기

JavaScript는 자동 이미지 loading_javascript 기술의 폭포 흐름 효과를 구현합니다.

관련 기사