Fatal编程技术网

图像库行网格javascript

javascript loops

图像库行网格javascript,javascript,loops,gallery,Javascript,Loops,Gallery,我正在尝试使用循环（从xml获取数据）为多个项目创建javascript图像库。每个项目至少3个图像，以两行排列 我已经为4个看起来正确的图像（如下）包装了html，但我很难将其转换为灵活的内容 <div class="project"> <div class="projectImage" id="projectImage" style="float: left;"><img src="image1.png"></div> <div clas

我正在尝试使用循环（从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>


.项目{
宽度：200px；
}
.投影图像{
浮动：左；
右边距：20px；
}
...
根据项目的宽度，它将是灵活的

<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>
（一堆700宽的谷歌标志）

（一堆400宽的谷歌标志）

最好将边距设置正确

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


.项目{
宽度：200px；
}
.投影图像{
浮动：左；
右边距：20px；
}
...
根据项目的宽度，它将是灵活的

<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>
（一堆700宽的谷歌标志）

（一堆400宽的谷歌标志）

我建议将您的关注点分开，以一种可以理解和灵活的方式解决这个问题

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

模板：

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

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

.project ul { overflow: hidden; }
.project ul li { float: left; }
/* break into rows of 2 */
.project ul li:nth-child(odd) { clear: both; }
CSS:

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

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

.project ul { overflow: hidden; }
.project ul li { float: left; }
/* break into rows of 2 */
.project ul li:nth-child(odd) { clear: both; }
编辑：我意识到这个答案可能贡献太多，但你确实是在javascript标签上问的，而不是css:）

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

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

模板：

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

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

.project ul { overflow: hidden; }
.project ul li { float: left; }
/* break into rows of 2 */
.project ul li:nth-child(odd) { clear: both; }
CSS:

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

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

.project ul { overflow: hidden; }
.project ul li { float: left; }
/* break into rows of 2 */
.project ul li:nth-child(odd) { clear: both; }
编辑：我意识到这个答案可能贡献太多，但你确实是在javascript标签上问的，而不是css:）

当你想要一个真正灵活的网格设计时，我建议你研究一下Massy jquery插件或wookmark jquery插件。首先，这是一个非常新且有趣的jquery扩展，其次，他们还实现了一个1d装箱算法，这样他们可以在列中堆叠箱子，每个列的箱子数量最大。这是自动的。刚开始可能很难学习和使用，但当您熟悉它时，它可以使网格布局变得非常简单。

我建议您在需要真正灵活的网格设计时，研究一下Mashine jquery插件或wookmark jquery插件。首先，这是一个非常新且有趣的jquery扩展，其次，他们还实现了一个1d装箱算法，这样他们可以在列中堆叠箱子，每个列的箱子数量最大。这是自动的。一开始，它可能很难学习，而且使用起来也很费劲，但当您熟悉它时，它可以使网格布局变得非常简单。

这看起来非常全面！非常感谢。我来自Flash/AS2，在那里我一路走来就把一切都编造出来了。js、php和css的不同足以让我可怜的设计师头脑混乱。看起来我现在可以继续这个项目了。谢谢你这看起来很全面！非常感谢。我来自Flash/AS2，在那里我一路走来就把一切都编造出来了。js、php和css的不同足以让我可怜的设计师头脑混乱。看起来我现在可以继续这个项目了。谢谢，我会看一看，也许现在的一些努力工作会在将来节省我的时间，我肯定我会再做一次，谢谢你的指点。我会看一看，也许现在的一些努力工作会在将来节省我的时间，我肯定我会再做一次，谢谢你的指点。