一个帖子中的多个图片，但是在一个容器中

Question

我在我正在开展的一个项目中陷入了逻辑。这不是WordPress的帖子。我想在同一个div容器中显示多个图像，可能是1,2,3 ....最多10个，这将从后端系统上传。这应该显示在一个视图中，类似于下面的屏幕截图。

我试图在没有JavaScript的div容器中安排图像。我是jQuery的新手，没有线索就很难找到它。

Codepen sample 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，但由于即使微软也不再支持它了......你应该要求大量资金自己做:)）< / p>

编辑3 如果此格式有多个元素，则上述小提琴中提供的js将无法正常工作。您需要找到jQuery.each（）的等价物或使用jQuery来处理它。

Answer 3

应在width中使用height和img tag（对于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%
}