JavaScript 및 jQuery를 사용하는 폭포수 흐름의 샘플 코드-JS 튜토리얼-php.cn

JavaScript 및 jQuery를 사용하는 폭포수 흐름의 샘플 코드

黄舟

풀어 주다： 2017-03-20 14:26:32

원래의

1619명이 탐색했습니다.

이번 글에서는 참고할만한 좋은 JavaScript와 jQuery를 활용하여 Waterfall Flow를 구현하는 방법을 주로 소개합니다. 아래 에디터로 살펴보겠습니다

일반 소개

MOOC에서 기본 js와 jQuery를 사용하여 Waterfall 흐름을 구현하는 방법을 배웠습니다. 여기 참고하세요

Javascript를 사용하여 구현

기본 구조:

<p id="main">
 <p class="box">
  <p class="pic"><img src="images/1.jpg" alt=""></p>
 </p>
 <p class="box">
  <p class="pic"><img src="images/2.jpg" alt=""></p>
 </p>
  ...
  ...
  ...
 </p>

로그인 후 복사

기본 스타일 ：

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .box{
 padding: 15px 0 0 15px;
 float: left;
 }
 .pic{
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 5px;
 box-shadow: 0 0 5px #ccc;
 }

로그인 후 복사

아이디어:

모든 .box를 #main

아래에 가져옵니다.

2. 페이지에 그림 열이 몇 개 있는지 계산하고 페이지 너비를 설정합니다

3. 이 열 중에서 높이가 가장 작은 열을 찾습니다

4. 두 번째 행부터 그림을 상대 위치 지정으로 설정하고 높이가 가장 작은 열 아래에 이미지를 배치합니다

5. 열의 높이를 업데이트하고 이미지가 될 때까지 3, 4, 5단계를 반복합니다. 로드됨

6. 마지막에 따라 사진의 위치에 따라 사진을 계속 로드할지 여부가 결정됩니다(lazy loading)

구현:

1. #main 가져오기 🎜> 아래의 모든 .box 3. 이 열 중에서 높이가 가장 작은 열을 찾습니다.

4. 두 번째 행부터 이미지를 상대 위치로 설정하고, 높이가 가장 작은 열 아래에 이미지를 넣습니다.

5. 열 높이를 업데이트하고 이미지가 로드될 때까지 3, 4, 5단계를 반복합니다.

  //将main下的所有class为box的元素取出来
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,box);

로그인 후 복사

rrree6. 마지막 이미지 위치 기준으로 이미지 로딩(lazy loading)

Assumption 배경에서 주는 데이터이다

// 根据class获取元素
 function getByClass(parent,clsname){
  var arr = [];//用来存储获取到的所有class为box的元素
  var oElement = parent.getElementsByTagName(&#39;*&#39;);
  for(var i=0;i<oElement.length;i++){
  if(oElement[i].className == clsname){
   arr.push(oElement[i]);
  }
  }
  return arr;
 }

로그인 후 복사

스크롤바가 눌렸을 때 실행 스크롤

  //计算整个页面显示的列数（页面宽/box的宽）
  var oBoxW = oBox[0].offsetWidth;
  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  //设置main的宽
  oParent.style.cssText = &#39;width:&#39; + oBoxW*cols + &#39;px;margin:0 auto;&#39;;

로그인 후 복사

마지막 사진 위치를 기준으로 로드 여부 판단

//存储每列的高度
  var hArr = [];
  for(var i=0;i<oBox.length;i++){
  if(i<cols){
   //第一行图片的高度
   hArr.push(oBox[i].offsetHeight);
  }else{
   var minH = Math.min.apply(null,hArr);
   var index = getMinIndex(hArr,minH);
   oBox[i].style.position = "absolute";
   oBox[i].style.top = minH + &#39;px&#39;;
   //oBox[i].style.left = oBoxW*index+&#39;px&#39;;
   oBox[i].style.left = oBox[index].offsetLeft + &#39;px&#39;;
   //更新每列的高度
   hArr[index] += oBox[i].offsetHeight;
  }
  }

로그인 후 복사

사진 로드

//获取每列高度最小的索引值
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

로그인 후 복사

jQurey를 사용하여 구현

jQuery를 사용하는 방법은 똑같습니다. 그냥 코드를 직접 넣으시면 됩니다

  //数据
  var dataInt = {&#39;data&#39;:[{&#39;src&#39;:&#39;1.jpg&#39;},{&#39;src&#39;:&#39;2.jpg&#39;},{&#39;src&#39;:&#39;3.jpg&#39;},{&#39;src&#39;:&#39;4.jpg&#39;}]};

로그인 후 복사

위 내용은 JavaScript 및 jQuery를 사용하는 폭포수 흐름의 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!