자 바스 크 립 트 와 jQuery 로 폭포 흐름 실현

대강 소개 하 다
모과 인터넷 에서 원생 js 와 jQuery 로 폭포 흐름 을 실현 하 는 것 을 배 웠 습 니 다.여기 서 필 기 를 합 니 다.
자 바스 크 립 트 로 구현
기본 구조:

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

기본 스타일:

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

생각:
1.가 져 오기\#main 의 모든.box
2.페이지 의 그림 이 몇 열 이 있 는 지 계산 하고 페이지 의 폭 을 설정 합 니 다.
3.이 몇 열 중 높이 가 가장 작은 열 을 찾 아 라.
4.두 번 째 줄 부터 그림 을 상대 적 인 위치 로 설정 하고 한 장의 그림 을 높이 의 최소 열 아래 에 놓는다.
5.열 높이 를 업데이트 하고 3,4,5 절 차 를 반복 하 며 그림 이 불 러 올 때 까지 합 니 다.
6.마지막 그림 의 위치 에 따라 그림 을 계속 불 러 올 지 확인 합 니 다(게 으 름 피 우기)
실현:
1.가 져 오기\#main 의 모든.box

  // main    class box      
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,box);

//   class    
 function getByClass(parent,clsname){
  var arr = [];//          class box   
  var oElement = parent.getElementsByTagName('*');
  for(var i=0;i<oElement.length;i++){
  if(oElement[i].className == clsname){
   arr.push(oElement[i]);
  }
  }
  return arr;
 }

2.페이지 의 그림 이 몇 열 이 있 는 지 계산 하고 페이지 의 폭 을 설정 합 니 다.

  //           （   /box  ）
  var oBoxW = oBox[0].offsetWidth;
  var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
  //  main  
  oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;'; 

3.이 몇 열 중 높이 가 가장 작은 열 을 찾 아 라.
4.두 번 째 줄 부터 그림 을 상대 적 인 위치 로 설정 하고 한 장의 그림 을 높이 의 최소 열 아래 에 놓는다.
5.열 높이 를 업데이트 하고 3,4,5 절 차 를 반복 하 며 그림 이 불 러 올 때 까지 합 니 다.

//       
  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 + 'px';
   //oBox[i].style.left = oBoxW*index+'px';
   oBox[i].style.left = oBox[index].offsetLeft + 'px';
   //       
   hArr[index] += oBox[i].offsetHeight;
  }
  }

//            
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

6.마지막 그림 의 위치 에 따라 그림 을 계속 불 러 올 지 확인 합 니 다(게 으 름 피 우기)
배경 에서 준 데이터 라 고 가정 해 봐.

  //  
  var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};　　

스크롤 바 가 굴 러 갈 때 실행

  //      
  window.onscroll = function(){
  scrollSlide(dataInt);
  }　　

마지막 그림 의 위치 에 따라 불 러 올 지 여 부 를 판단 합 니 다.

//                 
 function checkScrollSlide(parent,clsname){
  var oParent = document.getElementById(parent);
  var oBox = getByClass(oParent,clsname);
  var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var height = document.documentElement.clientHeight || document.body.clientHeight;
  return (lastBoxH < scrollTop + height)? true:false;
 }

그림 불 러 오기

//        
 function scrollSlide(dataInt){
  ////                 
  if(checkScrollSlide('main','box')){
  var oParent = document.getElementById('main');
  //              
  for(var i=0;i<dataInt.data.length;i++){
   var oBoxs = document.createElement('div');
   oBoxs.className = 'box';
   oParent.appendChild(oBoxs);
   var oPic = document.createElement('div');
   oPic.className = 'pic';
   oBoxs.appendChild(oPic);
   var oImg = document.createElement('img');
   oImg.src = 'images/' + dataInt.data[i].src;
   oPic.appendChild(oImg);
  }
  waterfall('main','box');
  }

jQurey 로 구현
jQuery 로 이 루어 진 사고방식 은 모두 같 으 니 코드 를 바로 넣 어 라

$(window).on('load',function(){
  waterfall();
  var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
  $(window).on('scroll',function(){
  scrollSlide(dataInt);
  })
 });
 function waterfall(){
  var $oBox = $('#main>div');
  var oBoxW = $oBox.eq(0).outerWidth();
  var cols = Math.floor($(window).width()/oBoxW);
  $('#main').css({
  'width' : cols * oBoxW,
  'margin' : '0 auto'
  });
  var hArr = [];
  $oBox.each(function(index,value){
  var oBoxH = $oBox.eq(index).height();
  if(index<cols){
   hArr.push(oBoxH);
  }else{
   var minH = Math.min.apply(null,hArr);
   var minHIndex = $.inArray(minH,hArr);
   $(value).css({
   'position' : 'absolute',
   'top': minH + 15,
   'left' : $oBox.eq( minHIndex ).position().left
   });
   hArr[minHIndex] += $oBox.eq(index).height() + 15;
  }
  });
 }
 function checkScrollSlide(){
  var $lastBox = $('#main>div').last();
  var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2);
  var scrollTop = $(window).scrollTop();
  var clientH = $(window).height();
  return (lastBoxH < scrollTop + clientH) ? true : false;
 }
 function scrollSlide(dataInt){
  if(checkScrollSlide()){
  $.each(dataInt.data,function(index,value){
   var $Box = $('<div>').addClass('box').appendTo('#main');
   var $Pic = $('<div>').addClass('pic').appendTo($Box);
   $('<img>').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
  })
  waterfall();
  }
 }

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!