フォトセットグリッド用のレイアウトを作成する数学方程式

Question

jQueryプラグイン 'フォトセットグリッド'を使用してイメージのフォトセットを作成しています。
このプラグインにリンクされている： http://stylehatch.github.io/photoset-grid/

$('.photoset-grid').photosetGrid({ 
     layout: '132', 
     width: '90%', 
     gutter: '4px' 
    }); 

<div class="photoset-grid"> 
    <img src="img/1.jpg"> 
    <img src="img/2.jpg"> 
    <img src="img/3.jpg"> 
    <img src="img/4.jpg"> 
    <img src="img/5.jpg"> 
    <img src="img/6.jpg"> 
</div> 

上記のコードは
layout: "132" 1行目のレイアウトに割り当てられた値に基づいて画像のレイアウトを作成するには1枚の画像を有する、2行目は、3枚の画像を有し、そして3行目には2つの画像があります。

私はこれをすべての標準のために使用していますが、 <div class="photoset-grid">の画像数が異なることがあります。画像の総数に基づいて、たとえば5画像はイメージlayout: "122"

Answer 1

EDITの合計数に合うランダムレイアウト返します - 画像はdynamycallyユーザーによって追加されたので...


私はあなたのことを示すためにスターターデモを作ったが、私の以前の答えは全く悪くありませんでした。
しかし、photosetGridを再インスタンス化するには、悲しいことに...あなたはそれをゴミ箱に入れなければなりません。
（.remove()を使用し、次に、.clone()、写真を含む未実施div）。

それはあなたが...
を研究し、で何かをしようとする必要がありますちょうどスターターです。
私は無料であなたの味に完全な機能を作りません。

このCodePenをご覧ください。
動的に追加されたすべてのイメージを表示するには、表示パネルを絞ることを強くお勧めします。

ここにコードをコピーしません...
これは以前の回答を使用した不完全なデモです。
あなたが努力をしたら、そのアイデアを得るべきです。
コードはよくコメントされていて、私はデバッグを残しましたconsole.log()。
;）

---

あなたはdata属性を使用して、異なるそれらすべてを開始すること.each()を使用することができます。
（それはあなたの数学を救う！）このような

何か：その自動生成されたユーザ私と一緒にこの文句を言わない仕事のことだ

$('.photoset-grid').each(function(){ 
    $(this).photosetGrid({ 
    layout: $(this).data("layout"), 
    width: '90%', 
    gutter: '4px' 
    }); 
}); 

<!-- One layout for 6 images --> 
<div class="photoset-grid" data-layout="132"> 
    <img src="img/1.jpg"> 
    <img src="img/2.jpg"> 
    <img src="img/3.jpg"> 
    <img src="img/4.jpg"> 
    <img src="img/5.jpg"> 
    <img src="img/6.jpg"> 
</div> 

<!-- Another layout for 6 images --> 
<div class="photoset-grid" data-layout="222"> 
    <img src="img/1.jpg"> 
    <img src="img/2.jpg"> 
    <img src="img/3.jpg"> 
    <img src="img/4.jpg"> 
    <img src="img/5.jpg"> 
    <img src="img/6.jpg"> 
</div> 

<!-- one layout for 4 images --> 
<div class="photoset-grid" data-layout="13"> 
    <img src="img/1.jpg"> 
    <img src="img/2.jpg"> 
    <img src="img/3.jpg"> 
    <img src="img/4.jpg"> 
</div>