CSS-类似花瓣网瀑布流式网页是如何布局的?

CSS-类似花瓣网瀑布流式网页是如何布局的?

晚风撩人 发布于 2017-04-04 字数 125 浏览 1119 回复 2

像花瓣,堆糖等网站主要以瀑布流的形式呈现图片,看起来这些图片布局杂乱无章,但是又有一规律。像这样的网站是如何布局的呢?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

灵芸 2017-09-21 2 楼

实现布局有三个思路:

1、传统的方法:多弄几个容器,分几列,然后往每个列里面插入元素.其实用table分几列实现更加方便,这种方式比较死板。

2、使用html5中css3的多列布局来实现.参见w3c标准中的css3多列布局模块; 不足的地方就是只能部分浏览器才能用。

3、使用绝对布局,通过javascript生成元素的布局位置,目前是最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整;首重讲讲这种方法。

这种方法的具体实现是:最开始我实现的时候是通过使用javascript生成虚拟的列,根据元素的顺序为每个元素分配一个虚拟的列,我们抛弃行的概念,采用的是一个类似流动的概念,新插入的元素是根据每个列的高度,那个高度 最低就流向哪个列,最后确保每个列的高度都趋近一致,实现我们想要的效果.当然我们可以采取获取所有元素的高度,然后统一计算一下,获取一个最佳的排列方 法,但是这会给浏览器带来较大的计算量,而且如果不断的加载更多的图片我们会得不偿失,所以我们采用的是一个流动的模型,只让当前对象寻找最低的高度然后插入.

我就说一下这三种方法及第三种方法的思路,就不贴具体代码了,这里有些资料你可以仔细看看;认真看完相信你也就会了

网页设计瀑布流式布局的JavaScript实现方式
前端开发:网站布局中的瀑布流式布局

浮生未歇 2017-08-29 1 楼