我建议将您的顾虑分开,以一种可以理解和灵活的方式解决这个问题。
- 让您的数据定义项目和图像的组织
- 让模板引擎(Handlebars)将您的数据转换为标记
- 让 CSS 处理将图像包装成行和其他位置样式
JSFiddle 示例
模板:
<script id="gallery-template" type="text/x-handlebars-template">
{{#each projects}}
<div class="project">
<h1>{{title}}</h1>
<ul>
{{#each images}}
<li><img src="{{this}}"></li>
{{/each}}
</ul>
</div>
{{/each}}
</script>
Javascript:
var gallery = {
projects: [
{
title: 'Gallery 1',
images: ['http://placekitten.com/100/100', 'http://placekitten.com/100/100', 'http://placekitten.com/100/100', 'http://placekitten.com/100/100']
},
{
title: 'Gallery 2',
images: ['http://placekitten.com/100/100']
}
]
};
var source = $("#gallery-template").html();
var template = Handlebars.compile(source);
var html = template(gallery);
$(document.body).html(html);
CSS:
.project ul { overflow: hidden; }
.project ul li { float: left; }
/* break into rows of 2 */
.project ul li:nth-child(odd) { clear: both; }
编辑:我意识到这个答案可能贡献太多,但你确实在 javascript 标签上问过它,而不是 css :)