How to animate the position change or float: left on window size change?


Tags: animation,css-float

Problem :

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!



Solution :

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:

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.


    CSS Howto..

    How to do letter spacing every two letters with CSS only?

    HTML & CSS: Vertical Flow Layout (columnar style), how to implement?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    How to set vertical align middle for a div enclose another div

    How to display source code with indent in a web page? HTML? CSS?

    How do I get user-inputted information from the website directly to my e-mail?

    How to create a Twitter Bootstrap Textarea

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to remove default chrome style for select Input?

    How to change the color of table rows once ng-repeat executed

    urls being shown after links when printing web page

    How to properly wait for browser reflow/repaint to finish

    How to rotate top-border around the circle?

    How to change navbar background color after page has scrolled down

    How do I create triangles like this? [closed]

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How to make a tag go to the right as far as possible? [closed]

    How to make animation smooth

    How to align HTML horizontaly using CSS

    How to customize ionic style components (lists and tabs with different shapes)

    how to put inline image css in ghost-blog?

    How do I vertically align the text to the middle using CSS?

    How to create border bottom with 2 different color?

    Background-Image does not show properly on IE8

    How to delete only the selected message inside a #Chat using jquery?

    How to mix two image using clipping in css?

    Slideshow using background images with navigation and captions

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to extract CSS styles using Scrapy

    How can I give each
  • its own bullet image?