HTML/CSSの3列に異なる高さの画像を配置する方法はありますか？

Question

私はソースから与えられた多くの画像を持っています（例えばデータベースから）。画像の数と大きさは任意です。私は、Djangoのテンプレートを使用して（私のHTMLコードがある

：私はこのように3列にページ上に配置したい：

しかし、私は、結果としてこれを得ました）：

{% for photo in object_list %} 
    <div class="photos-item"><img src="{{ photo.upload.url }}"></div> 
{% endfor %} 

とCSSです：

.photos-item { 
    float: left; 
    padding: 0.3em; 
} 

.photos-item img { 
    width: 300px; 
    box-shadow: 2px 2px 3px #888; 
    cursor: pointer; 
} 

私のコードで何が問題になっていますか？

Answer 1

多分何かlike thisが役に立ちますか？

ウェブには例がたくさんあります。 // CSS-トリック：あなたがしなければならないすべては、（明らかに）エクスプローラでは動作しません使用CSS3カラムのレイアウト、

#columns { 
    column-width: 320px; 
    column-gap: 15px; 
    width: 90%; 
    max-width: 1100px; 
    margin: 50px auto; 
} 

div#columns figure { 
    background: #fefefe; 
    border: 2px solid #fcfcfc; 
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); 
    margin: 0 2px 15px; 
    padding: 15px; 
    padding-bottom: 10px; 
    transition: opacity .4s ease-in-out; 
    display: inline-block; 
    column-break-inside: avoid; 
} 

div#columns figure img { 
    width: 100%; height: auto; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 15px; 
    margin-bottom: 5px; 
}