瀑布流布局,时下最火的页面布局方式,参差不齐却又顺其自然。大网站如 蘑菇街 , Pinterest 等都使用了这种布局方式。这种布局适合于小数据块,每个数据块内容相近且没有侧重。通
先看效果: 代码很简单: CSS代码: div.wrap{width:1300px; overflow:hidden; _zoom:1; margin:0 auto;}ul,li{margin:0; padding:0; list-style:none;}ul{float:left; display:inline; width:225px;}ul li{padding:5px; background:#eee; marg
css3 的 column列宽属性,简直就是为瀑布流而生,以往做瀑布流非常麻烦,这里推荐几款过去瀑布流做法: 兼容IE6的纯div+css瀑布流效果 、 瀑布流布局实现方法总结 。但是无论哪种方法,
css3的column多列布局让瀑布流布局从复杂变的非常简单,以前甚至要借助js,现在几行css即可完美解决。详见: 利用css3 column属性制作瀑布流效果 以及 column css3 详解 。 我爱模板网做最近
瀑布流布局出来好多年了,刚出来时,一般都采用js来实现,涌现了很多比较好的js插件,例如:masonry.js、gridify.js等等。这里就不再详说如何使用了,网上都能找到。今天讨论的是纯C
css3的column属性可以轻松实现瀑布流,js也可以实现。瀑布流效果比普通的列表好看很多,我爱模板网页推荐几个基于js或jQuery的瀑布流
鸿蒙next,harmony next的组件WaterFlow就是瀑布流组件,官方也有相关示例,但是并没有给出自动计算图片高度,下面是通过Image的onComplete计算出图片的宽高,集合WaterFlow组件实现瀑布流效果。