使用JQuery调整图像大小和重新排列图像;第一次装载时不能工作

Using JQuery to resize and realign images doesn't work on first load

本文关键字：图像 第一次 工作 不能 排列 调整 JQuery 使用 新排列      更新时间：2023-09-26

所以我对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} );
    });
}

我不知道在这里该做什么。如有任何帮助，我们将不胜感激。我甚至实现了一个预加载程序。

从页面中删除imagesloaded.js文件并使用更改行

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

至

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

来自同位素文件

未加载的图像可能会打乱同位素布局并导致项目元素重叠。imagesLoaded解决了此问题。images作品加载者在加载了所有子映像之后触发回调。

在所有图像加载后初始化同位素

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

这可能是的问题

还有更多关于。。。

编辑

你的包装标签是".公文包项目"，然后试试这个

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

相关文章：