前言
like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it
起由
最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有的js插件大多基于JQ的,而我稍微有点小强迫,不想基于JQ,于是就着手自己封装了一个。顺带就研究了下css3方式实现瀑布流,于是总结了下,写了几个示例demo,就有了本文。
几种常用的瀑布流介绍
一般瀑布流的实现常见有三种方式
- 传统的多列浮动
- css3样式定义
- js计算绝对布局
传统的多列浮动简介
首先固定屏幕中展示的列数,每一列中间的数据作为一组单独计算,插入数据时分别插入不同列中
优点:
- 布局最为简单,一般只依赖与一个浮动布局
- 不需要知道内容的高度,所以当有图片未加载时也不影
