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


本文摘自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 的

阅读剩余部分

相关阅读 >>

flex布局和传统的布局有什么不同

javascript的方法是函数吗

html5有哪些清空画布的方法

canvas处理图片的方法

移动端html5中判断横屏竖屏的方法

html中标签栏的几种实现方法

h5表单验证有哪些方法

网页的布局方式与浮动

html中表格动态添加的方法

css如何让div居中?css实现div居中的方法

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




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

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

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

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

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

评论

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