怎样在网页中做出瀑布流效果?

怎样在网页中做出瀑布流效果?,第1张

在网页中实现瀑布流效果方法:

1.传统多列浮动

各列固定宽度,并且左浮动

一列中的数据块为一组,列中的每个数据块依次排列即可

更多数据加载时,需要分别插入到不同的列上。

2. CSS3 定义

由 chrome/ff 浏览器直接渲染出来,可以指定容器的列个数,列间距,列中间边框,列宽度来实现

#container {

-webkit-column-count: 5;

/*-webkit-column-gap: 10px;

-webkit-column-rule: 5px solid #333;

-webkit-column-width: 210px;*/

-moz-column-count: 5;

/*-moz-column-gap: 20px;

-moz-column-rule: 5px solid #333;

-moz-column-width: 210px;*/

column-count: 5;

/*column-gap: 10px;

column-rule: 5px solid #333;

column-width: 210px;*/

}

column-count 为列数column-gap 为每列间隔距离column-rule 为间隔边线大小column-width 为每列宽度当只设置 column-width 时,裂掘浏览器窗口小于一列宽度时,列中内容自动模源槐隐藏当只设置 column-count 时,平均计算每列宽度,列内内容超出则隐藏都设了 column-count 和column-width,浏览器会根据 count 计算宽度和 width 比较,取大的那个值作为每列宽度,然后当窗口缩小时,width 的值为每列最小宽度。

3.绝对旦友定位

可谓是最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整。

首先,dreamweaver是编程只是工具,而瀑布流是靠语言写出来的程序效迹型果,dreamweaver不会帮你实现复尺镇杂的应用程序,二者的关系你应该搞明白。

其次,瀑布流可以自己编写,javascript加其它动态语言(php asp jsp等等),结合ajax实现的,自己写稍显姿困猜复杂

最后,如果你会php或者java,可以找现成的js库中的类似效果,如jquery就有这个插件,套上就行了,具体插件和使用方法自己google吧


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12256969.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存