워터폴 흐름 레이아웃 분석: JS 절대 위치 지정 구현_javascript 기술

절대 위치 지정을 사용한 폭포 레이아웃:

1. 레이아웃

1. 블록박스를 둘러싼 컨테이너:

코드를 복사하세요 코드는 다음과 같습니다.

... ...

2. 블록 박스:

코드 복사 코드는 다음과 같습니다:

                                                                                               div>



3. 첫 번째 행/5개 블록 상자를 초기화합니다.

코드 복사 코드는 다음과 같습니다: .pin{

padding: 15px 0 0 15px;

float: left;}
.box{
패딩: 10px ;
테두리: 1px solid #ccc;}
.box img{
너비:192px;
높이:auto;}



효과:

2. 아이디어:

1. 상위 메인의 스타일을 가로 가운데로 설정합니다. 2. 각 블록 상자 핀의 스타일을 설정합니다: 절대 위치 지정.

3. 창 ​​스크롤 이벤트에 대한 청취 기능을 설정합니다. 데이터를 읽고 블록 상자를 추가합니다.

JS 구현:

1-①: 부모 oParent 가져오기: 1-②: getClassObj() 함수 만들기 - 부모 ID와 블록 상자 클래스 이름을 통해 블록 상자가 포함된 배열을 가져옵니다.

코드 복사 코드는 다음과 같습니다. var oParent=document.getElementById('main '); // 상위 객체

var aPin=getClassObj(oParent,pin);// 저장 블록 상자 핀 배열 가져오기

var num=Math.floor(document.documentElement.clientWidth/aPin[0 ].offsetWidth ); // 가져오기 - 각 줄에 수용할 수 있는 블록 상자 수 - num [창 너비를 블록 상자 너비로 나눈 값]

oParent.style.cssText='width:' iPinW*num 'px;margin:0 auto;';//cssText 속성을 사용하여 상위 메인에 가운데 맞춤 스타일 추가: 고정 너비 자동 가로 여백

코드 복사 코드는 다음과 같습니다.function getClassObj(parent, className){

var obj=parent.getElementsByTagName('*');//부모

의 모든 하위 집합 가져오기 var pinS=[];//( var i =0;i ~          ]) }
핀 반환;}


2- ①: 각 열 높이를 저장하는 데 사용되는 Pinharr 배열을 생성하고 블록 상자 aPin[i]를 배열 pinHArr에 할당하고, 그 크기를 초과하는 블록 상자를 절대적으로 배치합니다. number 한 줄에 들어갈 수 있는 블록 상자의 수입니다.
　2-3: 생성 함수 getminHIndex()를 사용하여 배열의 최소값을 반환합니다.

코드 복사


코드는 다음과 같습니다.

var pinHArr=[];//각 열에 모든 블록 상자의 높이를 합친 값을 저장하는 데 사용됩니다. [이 배열의 길이도 열 수에 따라 변경됩니다.]
for(var i=0 ;i        var pinH=aPin[i].offsetHeight;//aPin 배열의 i번째 블록 상자의 가시성을 가져옵니다. 너비 offsetHeight
if(i pinHArr[i]=pinH; //첫 번째 줄의 num 블록 상자 aPin이 먼저 배열 pinHArr
}else에 추가됩니다. > var minH=Math.min.apply(null,pinHArr);//pinHArr 배열의 최소값 minH
를 계산합니다. var minHIndex=getminHIndex(pinHArr,minH);//생성된 getminHIndex를 통해 최소값 minH를 가져옵니다. ()- pinHArr aPin[i].style.position='absolute';//절대 변위 설정
aPin[i].style.top=minH 'px'; 인덱스 > aPin[ i] .style.left = apin [minhindex] .ofSetLeft 'px'; // 배열의 최소 높은 요소의 Apin [i] 블록
Pinharr [minhindex] = apin [i ]. //블록 상자 추가 후 열 높이 업데이트 코드는 다음과 같습니다.


function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH)return i;

}
}

3: 창 스크롤 이벤트에 대한 청취 기능을 설정합니다. 데이터를 읽고 블록 상자를 추가합니다. .

코드 복사

코드는 다음과 같습니다.


var dataInt={'data':[ {'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src': 'g ( 4).jpg'}]};//임시 데이터 객체
//아래에 창 스크롤 이벤트 수신 함수 정의

window.onscroll=function(){
if(checkscrollside() ){
var oParent=document.getElementById('main');// 상위 객체

for(var i=0;i var oPin=document. createElement( 'div'); // 요소 노드 추가 생성 Opin.className = 'Pin'; // 클래스 이름 이름 속성 추가 Oparent.appendchild (opin); .createElement('div'); oBox.className='box'; oPin.appendChild(oBox); 하위 노드 img 생성 및 추가 oImg.src='./images/' dataInt. data[i].src;

oBox.appendChild(oImg);

Waterfall('main', 'pin');//①②를 함수 Waterfall()에 캡슐화하고 추가된 노드를 문서.
       };

함수 checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin .length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);//[추가된 블록 상자 함수 Waterfall() 트리거]의 높이 생성: 마지막 블록 상자의 거리 웹페이지 자체 상단에서 높이의 절반(하단으로 스크롤하기 전 로딩 가능)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//호환성 해결에 주의
var documentH=document.documentElement.clientHeight;/ /창 높이
return (lastPinH }

3. 최종 효과:

4. 요약: 생각을 정리하기 위한 표현입니다. 표현이 그다지 조심스럽고 일관되지는 않으니 참고용으로만 사용하세요.

5. 완성된 html 파일 및 js 파일:

html: index.html

코드 복사 코드는 다음과 같습니다.

 
 
 
 
 

 
 < ;style type="text/css">
     *{padding: 0;margin:0;}
     #main{
         위치: 상대;
     }
     .pin{
         패딩: 15px 0 0 15px;
         float:left;
     }
     .box{
         패딩: 10px;
         테두리: 1px solid
         상자 그림자: 0 0 6px #ccc;
         테두리 반경: 5px;
     }
     .box img{
         너비:162px;
         높이: 자동;
     }
 > ;
 
 
 

    

        

            
        

    

    

        

            
        

> ;
    

    

        

           
        

    

    

        

            
        

    

    

        

            
        

     < ;/div>
 

 
 

js：waterfall.js 1 window.onload=function() {

复主代码 代码如下:

waterfall('main','pin');
var dataInt={'data':[{'src':'g (1).jpg'},{'src':' g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};

window.onscroll = Function () {
if (CheckscrollSide ()) {
var oparent = document.GetelementByid ('Main'); // 부모 수준 객체
for (var I = 0; data; datait .data .length;i ){
var oPin=document.createElement('div'); //요소 노드 추가
.appendChild (oPin);                                                                    🎜> var oImg =document.createElement('img') ;
oImg.src='./images/' dataInt.data[i].src;
oBox.appendChild(oImg);
}
폭포('main','pin') ;
};
}

}
/*
부모 부모 ID
핀 요소 ID
*/
함수 Waterfall(부모,핀){
var oParent=document.getElementById(parent);// 상위 객체
var aPin=getClassObj(oParent,pin);// 블록박스 핀을 저장하는 배열 가져오기 aPin
var iPinW=aPin[ 0].offsetWidth;//블록 프레임 핀의 너비
var num=Math.floor(document.documentElement.clientWidth/iPinW);//각 행에 수용할 수 있는 핀 번호 [창 너비 나누기 블록 상자의 너비]
oParent.style.cssText='width:' iPinW*num 'px;ma rgin:0 auto;';//상위 중심 스타일 설정: 고정 너비 자동 가로 여백

var pinHArr=[];//각 열의 모든 블록 상자의 높이를 합친 값을 저장하는 데 사용됩니다.
for(var i=0;i var pinH=aPin[i].offsetHeight;
if(i                                                                                                                                                                      num을 통해 사용 사용 사용 사용 사용 사용 사용 사용 사용 사용 사용 so so so so so so so so so so so so so so so so so so so so so so so so so so 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 너무 길수 그래서 너무 오래 너무 오래 너무 길어 so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so pinHArr);//배열 pinHArr의 최소값 minH
var minHIndex=getminHIndex(pinHArr,minH);
aPin[i].style.position='absolute';//절대 변위 설정
[i].style.top=minH 'px';
                                    aPin[i].style.left=aPin [minHIndex].offsetLeft 'px'; [i] 블록 상자 높이
            pinHArr[minHIndex] = aPin[i].offsetHeight;//블록 상자 추가 후 열 높이 업데이트                                            **
*상위 요소와 하위 요소의 클래스를 통해 동일한 유형의 하위 요소 배열을 가져옵니다
*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//부모의 모든 하위 집합 가져오기
var pinS=[];/ /하위 요소를 수집하는 배열 만들기 classname == className) {/
함수 getMinHindex (ARR, MINH) { if (arr [i] == minH){
return i;
}
}
}


function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop Math.floor(aPin[aPin.length-1].offsetHeight/2);/ /[블록 상자 추가 기능 Waterfall()]의 높이 생성: 마지막 블록 상자와 웹 페이지 상단 사이의 거리는 해당 높이의 절반입니다(하단으로 스크롤하기 전에 로드를 시작하기 위해)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//호환성 해결에 주의
var documentH=document .documentElement.clientHeight;//페이지 높이
return (lastPinH }