javascript - 列のイメージを再親化する

Question

解決策に導く情報を見つけることができなかった数日後、ウィズキッズが助けてくれることを願っています. 解決策は非常に簡単ですが、何を検索すればよいかわかりません。

状況：

私は主にjavascriptでレイアウトされた画像の列レイアウトを作成していますが、必要な列の数に関して柔軟にする必要があります.1から20までです.

これまでの私の考えは、ラッパーにあるすべての画像を取得し、9 つの画像を取得し、3 つの列がある場合、それらすべてを反復処理しますが、列 (1 から 3) に対応するクラスを割り当てることでした。その場で作成した新しい列 (div) の下でそれらを再親化します。

HTML マークアップは、9 つのサンプルイメージを含む次のとおりです。

<div id="imgWrapper">
    <img src="http://placekitten.com/301/300" class="flexImg">
    <img src="http://placekitten.com/302/300" class="flexImg">
    <img src="http://placekitten.com/303/300" class="flexImg">
    <img src="http://placekitten.com/304/300" class="flexImg">
    <img src="http://placekitten.com/305/300" class="flexImg">
    <img src="http://placekitten.com/306/300" class="flexImg">
    <img src="http://placekitten.com/307/300" class="flexImg">
    <img src="http://placekitten.com/308/300" class="flexImg">
    <img src="http://placekitten.com/309/300" class="flexImg">
</div>

CSS は次のとおりです。

#imgWrapper{
    /*No styles for the imgWrapper as it's just for selecting so far*/
}
img.flexImg{    
    width: 100% ;
    height: auto ;
    float: left;
    position: relative; 
}
.column{
    float: left;
    position: relative;
    /* the width is img-wrapper (which is 100%) devided by how many columns */
    width: 33.3% ;
    height: auto;
}

場合：

3 つの列が必要だとすると、それを js の変数として設定します。
次に、flexi-column-01、flexi-column-02、flexi-column-03 という 3 つを作成します。
次に、含まれているすべての画像を取得して<div id="imgWrapper">、最初の画像を最初の div に追加し、次に 2 番目の画像を 2 番目の div に、3 番目の画像を 3 番目の divに追加します。次に、4 番目の画像を最初の div に追加します。 .

から配列にすべての画像を追加し<div id="imgWrapper">、それをスライスして新しいdivに追加することで、さまざまな方法を試しましたが、うまくいきませんでした。

これまでに思いついたのは次のとおりです。これは機能しますが、保持できる列の数に関して柔軟性がありません。

$(document).ready(
  function flexiColumns () {
    var wrapper     = $('div#imgWrapper'),
        selSize     = wrapper.children('img').length,
        colCount    = 3,
        colSize     = selSize / colCount,
        colEntries  = $(wrapper).find('img').addClass('flexi-img-selector');

        colOne      = $(wrapper).append('<div class="columnOne" />'),
        colTwo      = $(wrapper).append('<div class="columnTwo" />'),
        colThree    = $(wrapper).append('<div class="columnThree" />'),

        firstCol    = $('img.flexi-img-selector:nth-child(3n+1)').addClass('first'),
        secondCol   = $('img.flexi-img-selector:nth-child(3n+2)').addClass('second'),
        thirdCol    = $('img.flexi-img-selector:nth-child(3n+3)').addClass('third');

         // CREATE THE BLOCK COLUMNS
        for (var i = 0; i <  colCount; i++){
         $(wrapper).append('<div class="flexi-column-0' + i + '" />')

        }

   $(firstCol).appendTo($('.columnOne'));
   $(secondCol).appendTo($('.columnTwo'));  
   $(thirdCol).appendTo($('.columnThree'));
  } // END FUNCTION FLEXICOLUMN
); // END DOCUMENT READY

それが助けになるなら、私はこれまでに持っているもののjsfiddleをまとめました：http://jsfiddle.net/Djk9e/

これにどのようにアプローチできるかについてのガイダンスや推奨事項は、大歓迎です。さらに詳しい情報や例が必要な場合はお知らせください。

前もってありがとう、ソフス

score 1 · Accepted Answer

考えられる解決策の簡単なドラフトのみ：

for (var i = 0; i <  colCount; i++){
      $(wrapper).append('<div class="column" id="col_'+i+'" style="width:' + colSize + '%;" />');

      var images = $('img').splice(0, Math.round(selSize/colCount));
      $(images).appendTo($('#col_'+i));
    }

http://jsfiddle.net/Djk9e/15/

列幅は動的に計算されます-マークアップ付きの静的cssセレクターは必要ありません。

その背後にある考え方：画像の配列をスライスし、それをラッピング列に追加します（列数と画像がペアになっている場合にのみ一致します！）。その後、残りの画像を選択し、そのインデックスによって列に割り当てます。

これは完全な解決策ではなく、かなりハッキーです-生産的な環境でこれを使用しないでください;）

javascript - 列のイメージを再親化する

1 に答える 1

Related

Reference