javascript - Bootstrap - 调整窗口大小时 react 和适合的缩略图

Question

我试图让我的缩略图在调整窗口大小时移动并适合可用空间。缩略图包含不同大小的图像，第一行看起来不错。然而，第二行的第一个缩略图似乎从第一行最长图像的底部开始。

我希望它做的是第一个缩略图或第二行正好在顶行第一个拇指的正下方。

所有图片的宽度都相同。

一张图片说一千句话: https://snag.gy/JqgAIl.jpg

谢谢大家!

<div className="col-lg-8">
  <div className="row">

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="87.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="26.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="25.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="34.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="99.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

    <div className="col-xs-6 col-md-3">
      <a href="#" className="thumbnail">
        <img src="12.png" alt="..." />
        <div className="caption">

        </div>
      </a>
    </div>

  </div>
</div>

Answer 1

尝试使用 jquery Masonary 插件，它会好得多。

$('.row').masonry({
  // options
  itemSelector: '.masonaryclass',
  columnWidth: 200
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js"></script>
<div class="col-lg-8">
  <div class="row">

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x150" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x100" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x155" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x250" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x50" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

    <div class="masonaryclass">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/100x120" alt="..." />
        <div class="caption">

        </div>
      </a>
    </div>

  </div>
</div>