关于Javascrip瀑布流深度解析

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/solakevon/p/4342931.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和CSS创建基本图片布局的方法，并通过JavaScript实现了瀑布流效果，使得图片能够自动填充页面上的空白区域。

1 基本布局

html

<div id="container">
    <div class="box">
        <div class="box_img">
            <img src="img/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/2.jpg">
        </div>
    </div>
</div>

css

*{
    margin: 0px;
    padding: 0px;
}
#container{
    margin:0 auto;position:relative;
}
.box{
    float:left;padding: 5px;
}
.box_img{
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
    padding: 5px;
}
.box_img img{
    width:150px;height: auto;
}

　　在上面代码中box为每一张的图片的容器，box_img为画框。在外层用container来容纳所有图片。

2 使用Javascript实现图片的瀑布流效果

　　　在通过上面布局之后我们可以看到图片的有序排列，但是我们看到在图片之间有很多的空白的地方。所有在这里我们就要使用Javascript来实现瀑布流效果，让图片自动充满这些空白的地方。因为我们限制了每张图片的宽度，

转载于:https://www.cnblogs.com/solakevon/p/4342931.html