使用JQuery調整大小和重新對齊圖像在第一次加載時不起作用

Question

因此，我對Jquery相對缺乏經驗。 我所做的是從主題林購買了一個wordpress主題，它有一個投資組合部分，應該用作磚石結構或網格布局。 第一次加載都不能正確加載。 該主題使用同位素，我認為此鏈接說明了需要完成的工作： http : //isotope.metafizzy.co/appendix.html#imagesloaded

下面是我認為調用此功能的代碼，可以在這里查看該網站https://www.roseryflowers.com/bridal-gallery/

jQuery(document).ready(function($) {
/*--  Portfolio --*/
if ($('.portfolio-items').length > 0) {
    $container = $('.portfolio-items');
    $container.isotope({filter: '.element'});
    $(window).trigger('resize');
    $('.portfolio-links a').click(function(e){
        e.preventDefault();
        var $this = $(this);
        if ($this.hasClass('active')) {
            return false;
        }
        $this.parents('.portfolio-links').find('.active').removeClass('active');
        $this.parent().addClass('active');
        $this.addClass('active');

        var selector = $this.attr('data-filter');
        $container.isotope( {filter: selector} );
    });
}

我不知所措。 任何幫助，將不勝感激。 我什至實現了預加載器。

Answer 1

從同位素的文檔

卸載的圖像會脫離同位素布局，並導致項目元素重疊。 imagesLoaded解決了此問題。 imagesLoaded通過加載所有子圖像后觸發回調來工作。

加載所有圖像后初始化同位素

var $container = $('#container').imagesLoaded( function() {
 $container.isotope({
    //options
  });
});

這可能是問題

還有更多關於...

編輯

您的包裝標簽是“ .portfolio-items”，然后嘗試

var $container = $('.portfolio-items').imagesLoaded(function () {

  if ($('.portfolio-items').length > 0) {
    $container = $('.portfolio-items');
    $container.isotope({ filter: '.element' });
    $(window).trigger('resize');
    $('.portfolio-links a').click(function (e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.hasClass('active')) {
            return false;
        }
        $this.parents('.portfolio-links').find('.active').removeClass('active');
        $this.parent().addClass('active');
        $this.addClass('active');

        var selector = $this.attr('data-filter');
        $container.isotope({ filter: selector });
    });
  }
});

您需要確保將ImagesLoaded添加到您的項目中https://github.com/desandro/imagesloaded

Answer 2

從頁面中刪除imagesloaded.js文件，並使用

$(window).trigger('resize');

至

$(window).load(function(){ $(window).trigger('resize'); });