JS瀑布流效果-布局

时间：2019-07-26 01:20:16 阅读：105 评论：0 收藏：0 [点我收藏+]

标签：set return ack 瀑布流 type nta 布局 connect mat

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>

JS瀑布流效果-布局

标签：set return ack 瀑布流 type nta 布局 connect mat

原文地址：https://www.cnblogs.com/kikyoqiang/p/11247688.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行