javascript - 如何在页面调整大小时对内联 block 项目的移动进行动画处理(最好使用 CSS)？

Question

HTML

<div class="mosaic_tile" style="background:rgb(255,0,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,255,0);">
</div>
<div class="mosaic_tile" style="background:rgb(0,0,255);">
</div>

CSS

.mosaic_tile{
  width:100px;
  height:100px;
  display:inline-block;
}

https://jsfiddle.net/suse008b/

请注意，当页面宽度小于所述行上元素的总宽度时，元素如何移动到下一行。无论如何，我是否可以在元素重新阻挡时为它们的运动设置动画？

编辑:我找到了一个例子。类似于此网页的投资组合部分。 http://www.socialfix.com/

Answer 1

在您提到的示例网站上，他们正在使用名为 Isotope 的 javascript 库来实现该效果。

http://isotope.metafizzy.co/