2

ループ (xml からデータを取得) を使用して、複数のプロジェクト用の JavaScript イメージ ギャラリーを作成しようとしています。プロジェクトごとに最低 3 つの画像を 2 列に配置します。

正しいように見える 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 つ以上のアイテムをループして、上記のように 2 つにグループ化された画像名を配置するにはどうすればよいですか?

4

3 に答える 3

0

この問題を理解しやすく柔軟な方法で解決するために、懸念事項を分離することをお勧めします。

  • プロジェクトと画像の編成をデータで定義
  • テンプレート エンジン ( 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; }

編集：この回答が貢献しすぎている可能性があることは承知していますが、cssではなくjavascriptタグで質問しました:)

于 2012-10-10T01:13:58.907 に答える
0

本当に柔軟なグリッド デザインが必要な場合は、masonry jquery プラグインまたは wookmark jquery プラグインを調べることをお勧めします。まず、これは非常に新しく興味深い jquery 拡張機能であり、2 つ目は、1 次元のビンパッキング アルゴリズムも実装しているため、列ごとの最大ボックス数でボックスを列にスタックします。そして、それは自動です。最初は学ぶのが難しく、使いすぎるかもしれませんが、慣れるとグリッド レイアウトが非常に簡単になります。

于 2012-10-10T04:15:42.297 に答える
0

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 ロゴの束)

于 2012-10-10T01:02:06.797 に答える