炫意html5
最早CSS3和HTML5移动技术网站之一

一组从大到小排好序的数据,生成div,宽度统一,高度不统一出现间隙

data: [
{ title: '美食', value: 99 },
{ title: '才艺', value: 96 },
{ title: '搞笑', value: 91 },
{ title: '旅行', value: 86 },
{ title: '游戏', value: 82 },
{ title: '颜值', value: 77 },
{ title: '评测', value: 73 },
{ title: '是的', value: 67 },
{ title: '斯诺克', value: 60 },
{ title: '美妆', value: 57 },
{ title: '科技', value: 52 },
{ title: '健身', value: 47 },
{ title: '生活', value: 41 },
{ title: '哈哈', value: 38 },
{ title: '养生保健', value: 33 },
{ title: '综合', value: 31 },
{ title: '新闻', value: 22 },
{ title: '健身', value: 15 },
{ title: '足球', value: 11 },
{ title: '篮球', value: 7 },
]

这样一组数据,在一个宽度300px的容器内,每一个item的宽度固定60px,高度的值为value值,高度最小值是20px,最后出来的效果, 因为元素是顶部对齐的,所有高度小的元素,和上一行的元素出现了间隙,请问有什么好的思路啊

回答

搜索瀑布流或者waterfall

float:left

炫意HTML5 » 一组从大到小排好序的数据,生成div,宽度统一,高度不统一出现间隙

CSS3教程HTML5教程