javascript - Broken layout with masonry.js but works when adding Foundation 5 -

javascript - Broken layout with masonry.js but works when adding Foundation 5 -

objective have functioning "pinterest style" layout.

background created blog concept masonry , layout pretty smooth. show how supposed work, posted this video on youtube

i had original conceptual demo on codepen used foundation 5. forked broken demo in question - on codepen.

but not work if remove foundation 5. weird because there no foundation classes anywhere in html.

problem should not @ rely on foundation 5. when remove external foundation 5 file, containers floated either side.

and layout goes single item per column when browser window accomodate many more.

current state

it works should not rely on foundation.

code

html

<div id="gallery-content" class="clearfix"> <!-- case 1 --> <div class="case-box item"> <img src="http://ships.bouwman.com/planes/boeing---x-48b.jpg" /> <div class="case-country country-us"></div> <div class="case-description"> <p>boeing blended wing x-48b</p> </div> <div class="case-options"> <a href="#">details<i class="fa fa-arrows-alt"></i></a> </div> </div> <!-- many more containers closed off #gallery-content div -->

css

the css foundation 5 coming cdnjs.

//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css

and code wrote

#gallery-content { width: auto; margin: 0 auto; } .item { display: block; float: left; width: 300px; margin: 0 20px 20px 0; -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s; transition: left .4s ease-in-out, top .4s ease-in-out .4s; } .item img { width: 300px; height: auto; } .case-box { border: #888 1px solid; padding-bottom: 72px; position: relative; } .case-box { -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

javascript

jquery

masonry cdnjs

//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.min.js

and code

$(document).ready(function() { // initialize masonry $('#gallery-content').masonry({ columnwidth: 320, itemselector: '.item', isfitwidth: true, isanimated: !modernizr.csstransitions }).imagesloaded(function() { $(this).masonry('reload'); }); });

live link: http://codepen.io/jgallardo/pen/bucbn.

the specific foundation css makes demo work expected is:

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

without rule items 2 pixels wider, due border beingness included in box model calculation, , expect that's what's breaking layout.

here fork of pen, foundation removed: http://codepen.io/anon/pen/nkmgj

javascript html css jquery-masonry