0

I'm using the masonry jquery plugin to arrange some images in a container, the plugin seems to be working but it's not displaying the items correctly. There are spaces that can be filled by items but instead the items are "floating" left on the next line, which should't be happening.

The issue can be seen here: http://riley87.co.uk/theme/ionic/portfolio-masonry.html

Here's the code:

<ul class="col full-width masonry-wrap filter-wrap">
    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x520-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x520-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x520-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x520-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-3.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-3.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x520-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x520-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x520-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x520-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-3.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-3.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-4.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-4.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-4.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-4.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>
</ul>

<script>
    $(document).ready(function(){
        var container = document.querySelector('.masonry-wrap');
        var msnry = new Masonry( container, {
          // options
          itemSelector: '.item'
        });
        var msnry;
        // initialize Masonry after all images have loaded
        imagesLoaded( container, function() {
          msnry = new Masonry( container );
        });
    });
</script>
tmarwen
  • 15,750
  • 5
  • 43
  • 62
user2962751
  • 13
  • 4

1 Answers1

0

First you need to remove the msnry redundant declaration and keep the one that gets fired once the images are loaded.

Secondly, try to define you .item selector as columnWidth option when settin up your masonry object:

$(document).ready(function(){
  var $container = $('.masonry-wrap');
  // initialize Masonry after all images have loaded
  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.item',
      columnWidth: '.item'
    });
  });
});
tmarwen
  • 15,750
  • 5
  • 43
  • 62