search

kudago / waterfall

Waterfall layout. Extremely fast lightweight version of fluid columns masonry layout of isotope.
http://kudago.github.io/waterfall/
288 stars 67 forks source link

Splicing waterfall blocks #7

Closed Alex-Sokolov closed 11 years ago

Alex-Sokolov commented 11 years ago

Every waterfall element has margins margin: 20px 10px 10px; In upper margin we have date-element with display: block andmargin: -23px Part of screenshot from Google Chrome Dev Tools (blue - block, orange - margins) waterfall And looks like waterfall manipulating blocks without it's margins

dy commented 11 years ago

Yep. It handles styles of items as a single style, in order to increase rendering speed (reading style of each item increases processing time). Didn't think it may be useful to someone. Ok, I'll hook this up tonight.

Alex-Sokolov commented 11 years ago

Thanks! Interesting fact. It fails after first page load. But if we resize window a bit, start showing right

dy commented 11 years ago

I couldn't repeat it. Checked all possible margins variations. Seems that margins work properly. Can you show me a code with the problem or demo on jsfiddle?

UPD. Seems that I've got it. It's when paddings are set and box-sizing isn't border-box.

dy commented 11 years ago

As a fast fix you can set up this style:

.item{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
Alex-Sokolov commented 11 years ago

Thanks for answer! I'm trying to fix too and found in what might be a problem. I delete min-width style from .item (width also was set by plugin options) and all start looks good.

Alex-Sokolov commented 11 years ago

Sometimes it's happened. Don't know what styles made this. But I have nice results, when add additional $('#waterfall').waterfall('reflow'); line after altering block to waterfall.