-4

I have a masonry to show my portfolio but when I load the page in the min width browser (like 400 pixels width) the images are overlayed, I have to resize the browser and then they accommodate.

Im using 3 js I downloaded from internet masonry main isotope.pkgd

the Site

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
user3430043
  • 79
  • 9
  • Please share the code if you are stuck somewhere then someone can help. The question is quite incomplete but all I can say is that you forgot the initialize the masonry that's why its' only working when the resize event occurred. Try to read the documentation and ask the question when you are stuck with something which is not available. – Rahul Gandhi Apr 29 '18 at 23:11
  • Dear, I appreciate very much your help. This is the code that activates the masonry, maybe I'm missing something... `$(window).load( function() { $('#container').masonry({ "itemSelector": ".item", "columnWidth": ".grid-sizer", }); }); ` – user3430043 May 01 '18 at 05:56
  • I did the same code in a plain html and it is working, I start thinking that the problem is not the js but the html.... – user3430043 May 01 '18 at 06:02

2 Answers2

0

Make sure you initialize the masonry properly as the code is only working when some event occurred (resize event in your case).

Masonry works on a container grid element with a group of child items.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

Initialize with jQuery

You can use Masonry as a jQuery plugin: $('selector').masonry().

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Source: https://masonry.desandro.com/

Edit: Please make sure you are passing strings (in the options) if you want to use a selector as the masonry code will only run document.querySelector for a string.enter image description here

Otherwise, the value is used as it is.

Rahul Gandhi
  • 1,035
  • 1
  • 11
  • 24
0

I have found the solution. First of all it wasn't a Masonry but a Isotope. I was using wrong the JS. I Contact the developer and he told me to use this function imagesloaded

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
user3430043
  • 79
  • 9