码迷,mamicode.com
首页 > Web开发 > 详细

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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!