一個帖子中的多個圖像，但都在一個容器中

Question

在我正在研究的一個項目中，我一直陷入邏輯中。 這不是WordPress的帖子。 我想在同一個div容器中顯示多個圖像，可能是1,2,3 ....最多10個，這將從后端系統上傳。 這應該顯示在一個視圖中，類似於下面的屏幕截圖。

我試圖在沒有JavaScript的div容器中安排圖像。 我是jQuery的新手，沒有線索就難以繼續。

Codepen樣本 here

我知道應該只使用jQuery。

如果您需要更多說明，請發表評論我會更新我的問題。

**

注意：Facebook帖子在一個視圖中有多個圖像上傳我正在嘗試相同的輸出。

**

Answer 1

我想你可能正在尋找jQuery.Masonry插件。 這將根據以下內容排列圖像：

1. 圖像數量。
2. 屏幕分辨率。

 $(document).ready(function () { $('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script> <div class="grid"> <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/> <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/> <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div> <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/> <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/> <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div> <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/> <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/> <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div> ... </div> 

Answer 2

你可以用它

.post-img {
  float: left;
  width: 40%;
  max-height: 400px;
  -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
} 

將它們垂直堆疊（pinterest樣式），僅限css，如某些人所示： http ： //jsfiddle.net/jalbertbowdenii/7Chkz/或嘗試使用此插件進行不同類型的布局： http：//masonry.desandro .COM /

編輯 http://jsfiddle.net/ffkdurw9/在這里你可以看到一個js來根據你預先設定的樣式首選項來交替列號。 我假設1 img全尺寸，2圖像半尺寸3或更多你去3列

編輯2 css列布局不適用於ie8，但因為即使微軟不再支持它了...你應該要求大量資金自己做:)）

編輯3如果有這種格式的多個元素，上面提供的js將無法正常工作。 您需要找到jQuery.each（）的等價物或使用jQuery來處理它。

Answer 3

應該在img tag使用width和height （For Fix ）

例

.post-img { 
   float: left;
   width: 40%;
   max-height: 400px;
   background-color: red; //custom
   padding: 10px; // custom
   margin: 10px; // custom  
 }

.post-img img {
  max-width: 100px; // custom
  max-height: 100px; // custom
}

Answer 4

對每個圖像使用float 。

 #image-container img{ float:left; max-width:33.33% }