すべての要素の周りの同位体の境界線

Question

アイソトープjクエリプラグインを使用して（ギャラリーレイアウトを使用して）ギャラリーに画像を表示しています... 私が達成しようとしているのは、 .. その境界線は唯一、私はそれが問題ではないですので、境界線が画像の間壊れる問題がない

Example of border

....画像の間で外側になるといけません:)

私はまた、ユーザが画像をフィルタリングして境界線要素の数とそれらが画面上にレイアウトされる方法に動的に適応します。

ありがとうございました。

これは私が

<div class="project"> 
    <div class="projects"> 
     <img src="path/to/image.jpg /> 
    </div> 
    <div class="projects"> 
     <img src="path/to/image.jpg /> 
    </div> 
    <div class="projects"> 
     <img src="path/to/image.jpg /> 
    </div> 
</div> 

を使用して、私は、同位体のプラグインを実行コードです：

$('.projects').isotope({ 
    itemSelector: '.project', 
    originLeft: false, 
    layoutMode: 'packery', 
    packery: { 
     gutter: 20 
    } 
}); 

同位体自体は素晴らしい作品...

私は、最初の（psuedosでスタイリングしようとしましたnth etc ...）しかし、画像のサイズが変化するのでうまくいきませんでした。

I画像をスキャンし、それに隣接する項目があるかどうかを判断し、適切なスタイルを設定しようと考えました。 しかし、私はこの作業が非常に面倒かもしれないので、これを避けることを望んでいます...そして私は怠け者です。 ）

Answer 1

あなたが達成しようとしているものに対して、既存の方法や単純なCSSソリューションはないと思います。アイソトープは、各要素を絶対的に位置づけ、場面の背後に位置/座標を維持するように見えます。親コンテナをシムで計算した高さまでオープンします。

あなたは、高さの幅を比較して、得られたArrayを通して同位体の.getfiltereditemelements()とループを使用することができるかもしれない、そしてx/yは、その要素が「エッジ」であるか否かのアイデアを得るために、親の寸法に調整しますそれがおそらくトップローまたはボトムローの要素であるかどうかを決定します。