如何在页面调整大小（理想情况下使用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/