JS瀑布流效果-布局

来源:
网络
收录时间:
2021-04-08 13:13:59
教育 阅读 7199

摘要:<!DOCTYPE html>. margin: 0px;padding: 0px;position: relative;padding: 5px;float: left;padding: 5px;border: 1px solid #cccccc;box-shadow: 0 0 5px #ccc;border-radius: 5px;width: 150px;height: auto;

JS瀑布流效果-布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS瀑布流效果-布局</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
        }

        .box {
            padding: 5px;
            float: left;
        }

        .box_img {
            padding: 5px;
            border: 1px solid #cccccc;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5px;
        }

            .box_img img {
                width: 150px;
                height: auto;
            }
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/1.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/2.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/3.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/4.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/5.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/6.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/7.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/8.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/9.jpg" />
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="/Scripts/img/img1/10.jpg" />
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {
            imgLocation("container", "box");
        }
        function imgLocation(parent, content) {
            //将parent下的所有的content全部取出
            var cparent = document.getElementById(parent);
            var ccontent = getChildElement(cparent, content);
            console.log(ccontent);
            var imgWidth = ccontent[0].offsetWidth;
            var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
            cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0px auto;";
        }
        function getChildElement(parent, content) {
            var contentArr = [];
            var allConnect = parent.getElementByTagName("*");
            for (var i = 0; i < allConnect.length; i++) {
                if (allConnect[i].className == content) {
                    contentArr.push(allConnect[i]);
                }
            }
            return contentArr;
        }
    </script>
</body>
</html>
查看全文
返回顶部