实现瀑布流布局的俩种方法


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

瀑布流布局是一个之前挺火,现在也比较常见的一种布局

这种看起来参差不齐的多栏布局,重点在于每个元素等宽不等高,一般图片网站应用较多

随着页面滚动,数据块会在每列底部不断加载,理论上可以无限加载,且不会页面美观

Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站

效果图:

1.png

一、经典套路: JavaScript + 绝对定位

HTML 结构:

1

2

3

4

5

6

7

8

<div id="main">

  ...  <div class="box">

    <div class="wrapper">

      <div class="pic"><img src="" /></div>

      <div class="text">简单介绍</div>

    </div>

  </div>

  ...</div>


整个瀑布流区域用一个 <div id="main"> 作为父容器

瀑布流中的每个数据块用 .box 作为基本布局, .wrapper 呈现样式和实际内容

CSS 样式:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {

  position: relative;

  width: 1280px; /*限定父容器的宽度*/

  margin: 0 auto;

}.box {

  position: absolute;

  padding: 7px; /*不建议使用 margin*/

  box-sizing: border-box;

  width: 256px; /*限定数据块的宽度*/}.wrapper {

  padding: 5px;

  background-color: #fff;

  border: 1px solid #e4e4e4;

  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);

}.pic {

  font-size: 0; /*消除行内元素的间隙*/}.pic img {

  width: 100%;

  height: auto;

}.text {

  color: #999;

  background: #FAFAFA;

  font-size: 14px;

  padding-top: 5px;

}


在 .box 中设置了 padding 是为了留出视觉上的间距

之所以不使用 margin,是因为后面会使用 js 获取元素的 offsetWidth 和 offsetHeight

而这两个属性值是不计算 margin 的

阅读剩余部分

相关阅读 >>

html5页面rem布局适配方法详解

301重定向是什么意思?301的方法有哪些

javascript的方法是函数吗

html写网页如何布局

javascript中map方法怎么用

h5正常文本框提示语的实现方法

语义化的html结构对布局的好处是什么?

关于html操作滚动条的方法

js代码实现瀑布流插件

怎么实现css文字垂直居中?实现css文字水平居中的4种方法

更多相关阅读请进入《方法》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...