イメージを空白に移動する方法

Question

イメージギャラリーのページを作成していますが、イメージが空白に移動しないという問題が発生しています。相続人例：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
img { 
 
    float: left; 
 
} 
 
.lscape { 
 
    width: 33%; 
 
} 
 
.port { 
 
    width: 33%; 
 
}

<div> 
 

 
    <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape"> 
 
    <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape"> 
 
    <img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port"> 
 
    <img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port"> 
 
    <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape"> 
 
    <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape"> 
 

 
</div>

任意の助けいただければ幸いです！

Answer 1

この問題を解決するには、2つの大きな要因があります：

1. Masonry - JavaScriptのグリッドレイアウトライブラリが。これはレイアウトに役立ちます。

2. Isotope - 同じ著者のものですが、フィルタリングオプションを追加することもできます。

これらがあなたの問題を解決することを願っています！

Answer 2

「Masonry」 - Dave DeSandroのJavaScriptグリッドレイアウトライブラリを試してみてください。それは、魅力Masonryのように動作します。