JSのカスケード効果 - レイアウト

JSのカスケード効果 - レイアウト

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
    < メタのcharset = "UTF-8"  /> 
    < タイトル> JS瀑布流效果-布局</ タイトル> 
    < スタイル> 
        * { 
            マージン：0PX 。
            パディング：0PX 。
        } 

        #container { 
            位置：相対。
        } 

        ■は{ 
            パディング：5pxの; 
            フロート：左; 
        } 

        .box_img { 
            パディング：5pxの。
            国境：1pxの固体#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の+  " PX;マージン：0PX自動; " ; 
        } 
        関数getChildElement（親コンテンツ）{
            VAR contentArr = [];
            VAR allConnect = parent.getElementByTagName（" * " ）;
            用（VAR I =  0 ; I < allConnect.length; iは++ ）{
                 場合（allConnect [I] .className == コンテンツ）{ 
                    contentArr.push（allConnect [I]）。
                } 
            } 
            戻りcontentArrと、
        } 
    </ スクリプト> 
</ ボディ> 
</HTML >