如何为位置更改或浮动动画：窗口大小更改后是否保留？ [英] How to animate the position change or float: left on window size change?

问题描述

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

I recently created this basic float: left layout below:

.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> s如何在窗口变小时产生动画效果。

On a few websites that I've visited, I've seen how the <div>s can have an animated move when the window becomes smaller.

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

I would like to know how this can be accomplished. (CSS animations, jQuery library, etc.)

非常感谢！

推荐答案

仅使用css-floats不会获得在这些站点上看到的平滑动画，因为元素只是捕捉到下一行。

With css-floats only you are not going to get the smooth animation you see on those sites, because the elements just snap to the next row.

但是有大量的库可以满足您的需要-它们基本上只是使用转换或顶部/左侧绝对定位每个项目：

But there's quite a selection of libraries which do what you want - they basically just position every item absolutely with transforms or top/left:

• 随机播放。 js-砌体布局，过滤，排序（jQuery）- http://vestride.github.io/Shuffle/


• Masonry.js-砌体布局（MIT许可证）- http://masonry.desandro.com/#getting-started


• Packery.js-带拖放功能的装箱包装（商业用途为25 $）- http://packery.metafizzy.co/


• Isotope.js-过滤，排序马索nry，垃圾箱包装和其他多种布局（商业广告为25美元）- http://isotope.metafizzy.co/

• Shuffle.js - masonry layout, filtering, sorting (jQuery) - http://vestride.github.io/Shuffle/
• Masonry.js - masonry layout (MIT license) - http://masonry.desandro.com/#getting-started
• Packery.js - bin-packing with drag drop (25$ for commercial) - http://packery.metafizzy.co/
• Isotope.js - filtering, sorting masonry, bin-packing and multiple other layouts (25$ for commercial) - http://isotope.metafizzy.co/

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

bin-packing layout - uses bin-packing to optimize utilized space -> minimize gaps

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

masonry layout - Tries to fill vertical columns equally.

不是真的了解第一个-语法有点奇怪。最后3个来自同一个人，可以使用jquery，也可以不使用jquery。根据您需要的功能进行选择。

Don't really know about the first one - the syntax is a bit weird. The last 3 are from the same guy and work with or without jquery. Choose based on the features you need.

这篇关于如何为位置更改或浮动动画：窗口大小更改后是否保留？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！