JS 캐스케이드 효과 - 레이아웃

JS 캐스케이드 효과 - 레이아웃

<! DOCTYPE HTML > 
< HTML > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8"  /> 
    < 타이틀 > JS瀑布流效果-布局</ 타이틀 > 
    < 스타일 > 
        * { 
            마진 : 0 픽셀 ; 
            패딩 : 0 픽셀 ; 
        } 

        #container { 
            위치 : 상대 ; 
        } 

        .box { 
            패딩 : 5px; 
            플로트 : 왼쪽 ; 
        } 

        .box_img { 
            패딩 : 5px ; 
            국경 : 1 픽셀의 고체 #CCCCCC ; 
            상자 그림자 : 0 0 5px #ccc ; 
            경계 반경 : 5px ; 
        } 

            .box_img IMG { 
                폭 : 150 픽셀 ; 
                높이 : 자동 ; 
            } 
    </ 스타일 > 
</ 머리 > 
<몸 > 
    < DIV ID = "용기" > 
        < DIV 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 1.JPG"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 2.JPG"  /> 
            </ DIV > 
        </ DIV > 

        <DIV의 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 3.JPG"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" > 
            < DIV의 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 4.jpg"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" >
            < DIV 클래스 = "box_img"> 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 5.jpg"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 /img/img1/6.jpg "  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 ="상자 " > 
            < DIV 클래스 ="box_img " > 
                <IMG의 SRC = "/ 스크립트 / IMG / img1로 / 7.jpg"  /> 
            </DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 8.jpg"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스 = "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 9.jpg"  /> 
            </ DIV > 
        </ DIV > 

        < DIV 클래스= "상자" > 
            < DIV 클래스 = "box_img" > 
                < IMG SRC = "/ 스크립트 / IMG / img1로 / 10.jpg"  /> 
            </ DIV > 
        </ DIV > 
    </ DIV > 

    < 스크립트 > 
        위해 window.onload =  함수 () { 
            imgLocation ( " 용기 " , " 박스 " ); 
        } 
        함수 imgLocation (부모
            
            document.getElementById를 (부모);
            VAR의 ccontent = getChildElement (cparent 콘텐츠); 
            CONSOLE.LOG (ccontent); 
            VAR imgWidth = ccontent [ 0 ] .offsetWidth;
            VAR의 COLS = Math.floor (document.documentElement.clientWidth / imgWidth); 
            cparent.style.cssText =  " 너비 : "  + imgWidth * COLS +  " 픽셀; 여백 : 0 픽셀의 자동; " ; 
        } 
        함수 getChildElement (상위 콘텐츠) {
            VAR contentArr = [];
            VAR allConnect = parent.getElementByTagName ( " * " );
            대 ( VAR I =  0 ; I < allConnect.length; 내가 ++ ) {
                 경우 (allConnect [I] .ClassName과 == 콘텐츠) { 
                    contentArr.push (allConnect [I]); 
                } 
            } 
            반환 contentArr을; 
        } 
    </ 스크립트 > 
</ 몸 > 
</HTML >