javascript - 为什么图像显示空间并向右走，应该是填补空白

Question

我正在尝试让我的图像填充示例网站中的可用空间
link view 我如何在没有空间的情况下显示我的图像，并且它会有不同的高度。它应该像示例网站。

下你得到我的代码。 Live demo my code

代码语言html5

<div class="blog_posts">
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="..." class="hg_t_1" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="...." class="hg_t_2" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="...." class="hg_t_5" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="...." class="hg_t_3" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="..." class="hg_t_4" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="..." class="hg_t_2" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="..." class="hg_t_1" alt="">
    </div>
  </div>
  <div class="">
    <div class="col-sm-4 col-md-4 col-lg-4">
      <img src="..." class="hg_t_4" alt="">
    </div>
  </div>



</div>

代码语言css

    .blog_posts img {
    width: 100%;
}

.blog_posts img.hg_t_1 {
    height: 220px;
}

.blog_posts img.hg_t_2 {
    height: 280px;
}

.blog_posts img.hg_t_3 {
    height: 120px;
}

.blog_posts img.hg_t_4 {
    height: 320px;
}

.blog_posts img.hg_t_5 {
    height: 150px;
}

Answer 1

从你的帖子中有点难以理解，但我认为你正在尝试让你的图像填充可用空间，如 the example site 您在评论中提供。

我认为这对于纯 HTML5/CSS 是不可能的，但是有一个名为 Masonry 的 javascript 库这可能会满足您的需求。

您的 HTML 将如下所示:

   <main>
       <img src="http://i.imgur.com/nQSRbvc.jpg" class="width33" alt="">
       <!-- the rest of your images -->
   </main>

width33 类只是将图像的 max-width 设置为 33%。这将允许图像在不改变纵横比的情况下缩放。并初始化砌体只需调用它:

$('main').masonry({
  itemSelector: 'img'
});

这是一个带有图像的 jsfiddle 示例:https://jsfiddle.net/fujtjf7q/