如何对位置变化或浮动进行动画处理:窗口大小更改时向左

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，您不会获得在这些站点上看到的流畅动画，因为元素只是捕捉到下一行。

但是有相当多的库可以做你想要的 - 它们基本上只是用转换或顶部/左侧绝对定位每个项目：

• 随机播放.js - 砖石布局，过滤，排序（jQuery） - http://vestride.github.io/Shuffle/
砌体
• .js - 砌体布局（麻省理工学院许可证） - http://masonry.desandro.com/#getting-started
• 包装.js - 带拖放的垃圾箱包装（商业 25 美元） - http://packery.metafizzy.co/
• 同位素.js - 过滤，分类砖石，垃圾箱包装和多种其他布局（商业25美元） - http://isotope.metafizzy.co/

料箱包装布局 - 使用料框包装优化利用空间 ->最小化间隙

砖石布局 - 尝试平均填充垂直列。

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