フォトグリッドの列レイアウト

Question

divを使用してグリッドを作成したいのですが、それらがすべて同じ幅で異なる高さになっていることを確認したいと思います。私はそれらを包み込みたいが、新しい行ではなく、最初の利用可能なスペースの下に置いてほしい。説明が必要な場合は、私に教えてください！

これはかなり考えです：http://imgur.com/a/WmUya

、あるいはまた、この：

]

私はちょうどかかわらず、簡単な説明が必要！ありがとうございました！

Answer 1

ピュアCSSのソリューション（Javascriptをせずに石積みのレイアウトは）

それはJavaScriptを使用して

.masonry { 
 
    column-count: 3; 
 
    column-gap: 5px; 
 
} 
 
img { 
 
    break-inside: avoid; 
 
    width: 100%; 
 
}

<div class="masonry"> 
 
    <img src="http://lorempixel.com/100/200/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/250/abstract" alt> 
 
    <img src="http://lorempixel.com/100/130/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/240/abstract" alt> 
 
    <img src="http://lorempixel.com/100/220/abstract" alt> 
 
    <img src="http://lorempixel.com/100/180/abstract" alt> 
 
    <img src="http://lorempixel.com/100/210/abstract" alt> 
 
    <img src="http://lorempixel.com/g/100/170/abstract" alt> 
 
</div>

（this tutorialを見てみましょう）column-countを使用したJavaScriptせずにこれを行うには、今も可能です

古い解決策かなり普及しているmasonryライブラリを使用することです - this exampleを参照してください。

それが必要とするすべてのコードは次のとおりです。

// init Masonry 
var $grid = $('.grid').masonry({ 
    // options... 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 

Answer 2

Isotope javascript pluginは正確に何をしたいんレイアウトモードがあります。例を使ってレイアウトをプレビューできます。 javascriptスキルがない場合は、データ属性を使用できます。

Answer 3

私がこれのようにする方法は、最初にあなたのイメージを詳しく見て、あなたは3つのコラムに気付くでしょう。 33.33パーセント又は同じ結果を生成インラインブロック：

この3列は、フロートと幅の3つの異なるdiv要素の容器です。

高さ：自動でしたが、この列の中にdivは常にこのように動作しますが、

ファンシーホワイトスペースは、コード

// update the value in your convenience 
border: 4px solid transparent; 
box-sizing: border-box; 

の代わりに、私たちは国境を使用マージンやパディングを使用しての、このチャンクによって行われます。この境界線は、div内にある背景色を拡張しない独立したパディングとして機能し、同時にデザイン外に余白を作成しません。これにより、の幅33.33％が維持されます。

助けてくれること