0

これを言葉で説明する方法がよくわからないので、写真で説明します。

説明 したがって、基本的には、同じ列の 2 つの項目の直後に div タグを書き込むコードが必要です。矢印はアイテムのパターンを示します。

これが私のコードです：

<script>
    imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"]; 
    for (var i=0,l=imgs.length; i<l; i++)
    {
        document.write("<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>");
    }
</script>
4

4 に答える 4

0

多分あなたは CSS しか使えないでしょう：

.item {
    display: inline-block;
    *display: inline; /* IE7 Hack */
    zoom: 1; /* FOR IE again... */
    max-width: 25%;
}

そして、コンテナを 4 つの画像の幅にします。

于 2013-07-05T15:43:13.293 に答える
0

うーん...この動作を実現するために（JavaScriptを使用して）現在の行動方針をたどると、次のようなものを使用できます（document.writeをinnerHTMLアプローチに変更しました。気にしないでください）：

imgs = ["/images/toilet.jpg", "/images/kitchen.jpg"];
var imgHtml = "";
for (var i=0; i<imgs.length; i++)
{
    if (i % 2 == 0){
        imgHtml += "<div class='col-wrap'>";
    }
    imgHtml += "<div class='item'><img class='imgitem' src='" + imgs[i] + "'></div>";
    if (i % 2 != 0 || i == imgs.length - 1){
        imgHtml += "</div>";
    }
}
document.getElementById("wrapper").innerHTML = imgHtml;

そして関連する CSS:

.col-wrap{
    display:inline-block;
    *display: inline;
    zoom: 1;
    vertical-align:top;
}

<div id="wrapper"></div>このスクリプトの innerHTML を置き換えるには、本文にを追加する必要があることに注意してください。ここで重要なのは、.col-wrap2 つの要素ごとに要素を追加.itemして、高さ 2 の列に配置できるようにすることです。

（編集）そうです、これがどのように見えるか知りたい場合は、これがCodePen の例です。（私はあなたの画像にアクセスできないので、いくつかの追加のスタイリングで少し異なりますが、スクリプトの背後にあるアイデアは残っています. ）

これがあなたが探していた動作であることを願っています! そうでない場合は、お気軽にお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-07-05T15:56:39.140 に答える
0

そのために JavaScript は必要ありません。

http://cssdeck.com/labs/pml2y1dl

.container {
  -webkit-columns: 50px;
  -moz-columns: 50px;
  columns: 50px;
}

columns プロパティは、column-width と column-count の省略形です。レスポンシブ デザインでうまく機能するため、column-width のみを使用することをお勧めしますが、代わりに正確な列数を指定することもできます ( columns: 4)。

http://caniuse.com/#feat=multicolumn

于 2013-07-05T15:38:03.537 に答える
0

アイテムを右にフロートさせ、4 番目のアイテムを書き込んだ後、div を追加しstyle="clear:both"て次の行を書きます。

もう 1 つの方法は、masonryのようなライブラリを使用することです。

于 2013-07-05T15:29:15.727 に答える