首页登陆欢迎您!
首页登陆 > 运维知识 > 官网平台JavaScript、jQuery和CSS3兑现瀑布流结构

官网平台JavaScript、jQuery和CSS3兑现瀑布流结构

时间:2019-12-17

先说一下什么是瀑布流布局。

html结构

就是一堆等宽不等高的数据块组成的页面,如图:

(Emmet)
(div.box>div.pic>img[src="images/$.jpg"])*23

现在好多网站都采用这种瀑布流布局,如蘑菇街。美丽说等等。 首先要实现它就要明白它是怎样排列的。 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。 第一行就是按顺序排列,其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

<div id="main">
        <div class="box">
            <div class="pic">![](images/1.jpg)</div>
        </div>
        <div class="box">
            <div class="pic">![](images/2.jpg)</div>
        </div>
        <div class="box">
            <div class="pic">![](images/3.jpg)</div>
        </div>
        <div class="box">
            <div class="pic">![](images/4.jpg)</div>
        </div>
</div>

这里定义了14个图片,每个图片都被一个class= box的属性和class= “pic”的属性包裹,在css中定义其样式:

css结构

*{ padding: 0px; margin: 0px; } #main{ position: relative; } .box{/* display: inline-block;*/ padding: 15px 0px 0px 15px; float: left; } .pic{ padding: 10px; border-radius: 5px; border:1px solid #ccc; box-shadow: 0 0 5px #ccc; } .pic img{ width: 165px; height: auto; } 
*{
    margin:0;
    padding:0;
}
#main{
    position: relative;

}
.box{
    padding:10px 0 0 15px;
    /*display: inline-block;一行显示*/
    float: left;
}
.pic{
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;

}
.pic img{
    /*瀑布流特点*/
    width: 165px;
    height: auto;
}

其实每一行六个图片不是固定的,当你缩小窗口时,它会成为两列,或者三列四列。但我们为了以后的布局,就将它设置为固定的列数,即根据窗口的大小除以图片的大小,向下取整。

一、JavaScript原生方法实现瀑布流布局

上一篇:jQuery动态追加页面数据以至事件委托精解_jquery_脚本之家 下一篇:没有了