JS瀑布流效果-布局

Posted kikyoqiang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS瀑布流效果-布局相关的知识，希望对你有一定的参考价值。

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瀑布流效果-布局的主要内容，如果未能解决你的问题，请参考以下文章

js实现无限瀑布流

flex布局实现瀑布流排版

js实现瀑布流加载图片效果

JS实现动态瀑布流及放大切换图片效果(js案例)

css瀑布流间距不对

bootstrap+masonry.js写瀑布流