CODEWITHSUNDEEP
animationcss-float
Ian Hazzard
Ian Hazzard

Reputation: 7771

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

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!

Upvotes: 1

Views: 838

Answers (1)

iSchluff
iSchluff

Reputation: 465

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.

Upvotes: 2

Related Questions