jquery瀑布流

最新推荐文章于 2023-01-20 23:30:44 发布

原创最新推荐文章于 2023-01-20 23:30:44 发布 · 560 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #瀑布流 #jquery瀑布流

jquery 专栏收录该内容

7 篇文章

订阅专栏

jquery瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0px auto;padding: 0px;}
        .pubuliu{width: 860px;position: relative;}
        .pubuliu .box{width: 200px;position: absolute;top: 0px;left: 0px;border: 5px solid black;border-radius: 20px;}
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var boxlis=$(".box").length
            for(var i=0;i<boxlis;i++){
                var left=i%4*220
                var sum=0
                for(var j=i-4;j>=0;j=j-4){
                    sum=sum+$(".box").eq(j).height()+20
                }
                $(".box").eq(i).css({"left":left,"top":sum})
            }
        }
    </script>
</head>
<body>
    <div class="pubuliu">
        <div class="box">
            <p><img src="images/0.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/1.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/2.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/3.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/4.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/5.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/6.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/7.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/8.png"></p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/9.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
        <div class="box">
            <p><img src="images/10.png"></p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
            <p>内容</p>
        </div>
    </div>
</body>
</html>

图片0宽为200px
图片1宽为200px
图片2宽为200px
图片3宽为200px
图片4宽为200px
图片5宽为200px
图片6宽为200px
图片7宽为200px
图片8宽为200px
图片9宽为200px
图片10宽为200px

1、图片的宽度为200px；右侧空余20px；所以一个图片的总宽度为220px；
2、整个瀑布流的宽度为4张图片的宽度加上3个空余的宽度，总宽度为860px；
3、需要引进jquery的包
4、大的瀑布流页面给上position: relative;每个box给上position: absolute；top: 0px;left: 0px;
5、整个效果图如下：

最后页面的效果图