我正在尝试使用循环(从xml获取数据)为多个项目创建javascript图像库。每个项目至少 3 张图像,每行两张。
我已经为 4 张看起来正确的图像(下图)编写了 html,但我很难将其转换为灵活的东西。
<div class="project">
<div class="projectImage" id="projectImage" style="float: left;"><img src="image1.png"></div>
<div class="projectImage" id="projectImage" style="float: left; padding-left: 20px;"><img src="image2.png"></div>
我越来越困惑了。我是否需要循环中的循环来处理只需要生成一次的代码块,以及如何遍历 4+ 项并将图像名称分组为两个,如上所示?
最好设置右边距。
<style>
.project {
width: 200px;
}
.projectImage {
float:left;
margin-right: 20px;
}
</style>
...
<body>
<div class="project">
<div class="projectImage" id="img1"><img src="image1.png"></div>
<div class="projectImage" id="img2"><img src="image2.png"></div>
<div class="projectImage" id="img3"><img src="image3.png"></div>
<div class="projectImage" id="img4"><img src="image4.png"></div>
<div class="projectImage" id="img5"><img src="image5.png"></div>
根据 .project 的宽度,它会很灵活。
http://jsfiddle.net/bzykh/(一堆谷歌标志与700宽度的容器)
http://jsfiddle.net/bzykh/1/(一堆谷歌标志与400宽度的容器)
我建议将您的担忧分开,以可理解和灵活的方式解决此问题。
- 让数据定义项目和图像的组织
- 让模板引擎(车把)将数据转换为标记
- 让 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:)
我建议你研究一下砖石jquery插件或wookmark jquery插件,当你想要一个真正灵活的网格设计时。首先,这是非常新颖和有趣的jquery扩展,其次,他们还实现了一维箱打包算法,因此他们将盒子堆叠在列中,每列目标的最大盒子数。这是自动的。起初可能很难学习和使用过度,但当您熟悉它时,它可以使网格布局变得非常容易。