jquery - Masonry items position change -
this masonry code. working fine problem item 4 not set last. can fix that? in advance.
// external js: masonry.pkgd.js $(document).ready( function() { $('.grid').masonry({ itemselector: '.grid-item', columnwidth: '.grid-sizer', percentposition: true, gutter: 5, }); });
* { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { background: #eee; max-width: 1200px; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } /* ---- grid-item ---- */ .grid-sizer, .grid-item { width: calc(15.71% - 5px); /*width: 15.71%;*/ } .grid-item { height: 120px; float: left; background: #d26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } /*.grid-item--width2 { width: 20.3% } .grid-item--width3 { width: 31.42%; }*/ .grid-item--width2 { width: calc(20.3% - 5px) } .grid-item--width3 { width: calc(31.42% - 10px); } .grid-item--height2 { height: 200px; } .grid-item--height3 { height: 260px; } .grid-item--height4 { height: 360px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> <div class="grid"> <div class="grid-sizer"></div> <div class="grid-item grid-item--width3 grid-item--height2">1</div> <div class="grid-item grid-item--width3">2</div> <div class="grid-item">3</div> <div class="grid-item grid-item--width2 grid-item--height2">4</div> <div class="grid-item">5</div> <div class="grid-item grid-item--width3">6</div> </div>
Comments
Post a Comment