jquery masonry collapsing on initial page load, works fine after clicking “home” menu button

前端 未结 2 1435
有刺的猬
有刺的猬 2021-02-06 08:57

My jquery masonry setup is working strangely on initial page load. It seems to be placing the images in the first row fine, the second row is positioned overlapping the first an

相关标签:
2条回答
  • 2021-02-06 09:15

    I think it's because the script is being run before the content (images) is fully loaded. Hence the positioning error.

    Try this.

      $(window).load(function()
      {
          $('#content').masonry({
               itemSelector : '.product',
               columnWidth : 310,
               isAnimated: true,
               animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
               }
          });
      });
    
    0 讨论(0)
  • 2021-02-06 09:30

    I also had a similar issue, images were overlapping at the first loading time. I overcame this by first loading the images.

    $(".id").imagesLoaded(function(){
        $('.id').masonry({
            itemSelector: '.scrapcontent',
            columnWidth: 3,
            isAnimated:true,
            animationOptions: {
                duration: 700,
                easing:'linear',
                queue :false
            }
        });
    }
    

    If the images are loaded then your masonry's duty has to start. It should work fine.

    0 讨论(0)
提交回复
热议问题