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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -