순수 js는 폭포 흐름 레이아웃을 구현하고 ajax는 data_javascript 기술을 동적으로 추가합니다.-JS 튜토리얼-php.cn

이 기사에서는 순수 js 코드를 사용하여 폭포 흐름 웹 페이지 효과를 직접 작성하고, 처음에는 기본 폭포 흐름 레이아웃을 구현하고, 아래쪽으로 스크롤한 후 새 이미지 기능을 로드하는 Ajax 데이터를 시뮬레이션합니다.

단점:

1. 프로그램이 반응하지 않으며 실시간으로 페이지 너비를 조정할 수 없습니다.

2. Ajax 시뮬레이션 데이터 이미지를 프로그램에 추가하면 전체 페이지의 모든 이미지 위치가 변경됩니다.

3. 프로그램은 이미지 크기를 읽기 전에 모든 이미지가 로드될 때까지 기다립니다. 실제로는 이 작업을 수행할 수 없습니다.

4. 실제 프로젝트에서는 이미지 크기 값을 백그라운드 프로그램에서 제공해야 하며, 이미지의 너비 속성은 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를 위치:relative;로 설정합니다.

2. .box를 float:left;로 설정합니다.

3. 웹페이지가 로드된 후 모든 이미지를 배치합니다.

　3.1 이미지 너비는 고정되어 있습니다. 현재 페이지의 각 행에 수용할 수 있는 이미지 수를 계산하고 #container의 너비를 구한 다음 페이지를 중앙에 배치합니다.

　3.2 모든 그림을 반복합니다. 첫 번째 숫자의 그림은 기본적으로 부동 레이아웃을 첫 번째 행으로 설정하고 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 < scrollTop + pageHeight를 감지하면 ajax를 사용하여 새로 추가된 이미지의 json 데이터를 가져옵니다.

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;
}

로그인 후 복사

렌더링:

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.