如何设置位置变化或浮动的动画：左边的窗口大小变化？

Question

我最近在下面创建了这个基本float: left布局：

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    background: gray;
    margin: 0 10px 10px 0;
}

.big {
    width: 210px;
    height: 210px;
    float:left;
}

.wrap {
    display: inline-block;
}

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i big"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i big"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>
</div>

在我访问过的几个网站上，我已经看到<div>在窗口变小时可以进行动画移动。

我想知道如何实现这一目标。 （CSS动画，jQuery库等）

非常感谢！

Answer 1

使用css-floats只是你不会得到你在这些网站上看到的流畅动画，因为元素只是捕捉到下一行。

但是有很多库可以满足您的需求 - 它们基本上只是通过变换或上/下来定位每个项目：

• Shuffle.js - 砌体布局，过滤，排序（jQuery） - http://vestride.github.io/Shuffle/
• Masonry.js - 砌筑布局（麻省理工学院执照） - http://masonry.desandro.com/#getting-started
• Packery.js - 带拖放的装箱（25美元用于商业用途） - http://packery.metafizzy.co/
• Isotope.js - 过滤，排序砌体，装箱和其他多种布局（商业用25美元） - http://isotope.metafizzy.co/

bin-packing layout - 使用bin-packing来优化利用空间 - ＆gt;最小化差距

砌体布局 - 尝试平均填充垂直列。

真的不知道第一个 - 语法有点奇怪。最后3个来自同一个人，有或没有jquery工作。根据您需要的功能进行选择。