How to animate the position change or float: left

2019-05-30 09:41发布

问题:

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>

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.

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

Thanks so much!

回答1:

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:

  • 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.

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.