图片库行网格javascript答案

【问题标题】：image gallery rows grid javascript图片库行网格javascript
【发布时间】：2012-10-10 00:48:19
【问题描述】：

我正在尝试使用循环（从 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+ 项并将图像名称分成两组？

【问题讨论】：

标签： javascript loops gallery

【解决方案1】：

最好设置margin-right。

<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 宽容器的 Google 徽标）

http://jsfiddle.net/bzykh/1/（一堆 400 宽的 Google 徽标）

【讨论】：

【解决方案2】：

我建议将您的顾虑分开，以一种易于理解和灵活的方式解决这个问题。

让您的数据定义项目和图像的组织方式
让模板引擎 (Handlebars) 将您的数据转换为标记
让 CSS 处理将图像包装成行和其他位置样式

JSFiddle example

模板：

<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 :)

【讨论】：

这个看起来很全面！谢谢！我来自 Flash/AS2，我在进行过程中完成了所有工作。 js、php 和 css 的不同足以让我可怜的设计师头脑混乱。看来我现在可以继续进行该项目了。谢谢

【解决方案3】：

当你想要一个真正灵活的网格设计时，我建议你研究 masonry jquery 插件或 wookmark jquery 插件。首先，这是一个非常新且有趣的 jquery 扩展，其次，它们还实现了 1d bin-packing 算法，因此它们将盒子堆叠在列中，每列目标的最大盒子数。这是自动的。起初它可能很难学习并且使用过度，但是当您熟悉它时，它可以使网格布局变得非常容易。

【讨论】：

我会看看这个，也许现在的一些努力可以节省我将来的时间，我相信我必须再做一次，谢谢你的指点。