Masonry issue columns

Question

I want to redesign my website by adding a new type of gallery (in a few words, it's about masonry).

In my view, I want a full page width with a few columns for images. The problem is next, with this code, I only have 2 columns; in fact, inside of the columns I just have images.

The code:

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.item'
  });
});

I want images on full width, with 4-5 columns depends by the width of images.

Macsupport · Accepted Answer · 2015-04-02T02:42:57.937

You have a few issues with your code. You are setting the masonry paramameters in 2 places, using data attributes in your html and with javascript. You are using jQuery js but you didn't include jQuery in your jsfiddle. You are calling imagesloaded.js but you didn't include it in your fiddle either. You have the columnWidth set at 200 but your using percentage for your items. Here is an updated jsfiddle using jQuery, imagesloaded and a grid-sizer and your images more responsive.

Code:

 var $container = $('#container');
$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.item',
     columnWidth: '.grid-sizer'
  });
 });

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }
.grid-sizer { width: 25%; }
.item img{width:100%;}

See the HTML as to how to use grid-sizer. I removed your data-attribute setup as well

----ADDENDUM------- in response to your comments

You are trying to call imagesloaded and masonry before the js files are even loaded, so you get an "undefined" error.

THIS:

  <script>
            var $container = $('#container');
                $container.imagesLoaded( function(){
                  $container.masonry({
                    itemSelector : '.item',
                     columnWidth: '.grid-sizer'
                  });
                 });

            </script>

Needs to be loaded after this:

<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>

not before them, as you have now.

Thank your for your solution but I've a problem with.. I put everything here http://podeanu-alexandru.com/catalin/alex/tour.php and doesn't work .. what I did wrong? — Alex, Mar 31 '15 at 16:52
You somehow have an incomplete version of imagesloaded.js on your site. Install the correct and full version [imagesloaded](http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js) — Macsupport, Apr 01 '15 at 14:30
I used your entry.. and the same problem http://podeanu-alexandru.com/catalin/alex/tour.php someone else can gives me another solution? — Alex, Apr 01 '15 at 18:39

Masonry issue columns

1 Answers1