isotope插件无法正常加载，并切断了div

Question

因此，如果您查看：http://uniplaces.micrositesonline.info/blog/cities/，您将看到同位素砌体插件正在运行。整个主题来自https://themetrust.com/demos/swell/。问题是，在我们的网站上，同位素插件以一种奇怪的方式加载，包含砖石图像的 div 无法正确调整高度，因此有时会被切断。您通常可以通过在页面加载后重新加载页面来复制它。

包含js的代码在'themetrust.js'中：

///////////////////////////////
// Project Filtering
///////////////////////////////

function projectFilterInit() {
    if( jQuery('#filter-nav a').length > 0 ) {
        jQuery('#filter-nav a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#projects.thumbs').isotope({
                filter: selector,
                hiddenStyle : {
                    opacity: 0,
                    scale : 1
                }
            });

            if ( !jQuery(this).hasClass('selected') ) {
                jQuery(this).parents('#filter-nav').find('.selected').removeClass('selected');
                jQuery(this).addClass('selected');
            }

            return false;
        });
    } // if() - Don't have this element on every page on which we call Isotope
}

///////////////////////////////
// Project thumbs
///////////////////////////////

function isotopeInit() {
    setColumns();
    gridContainer.isotope({
        resizable: true,
        layoutMode: 'masonry',
        masonry: {
            columnWidth: colW
        }
    });

    jQuery(".thumbs .small").css("visibility", "visible");

}

///////////////////////////////
// Isotope Grid Resize
///////////////////////////////

function setColumns()
{
    var columns;
    var gw = gridContainer.width();
    var ww = jQuery(window).width()
    if(ww<=700){
        columns = 1;
    }else if(ww<=870){
        columns = 2;
    }else{
        columns = 3;
    }
    colW = Math.floor(gw / columns);
    jQuery('.thumbs .small').each(function(id){
        jQuery(this).css('width',colW+'px');
    });
    jQuery('.thumbs .small').show();
}

function gridResize() {
    setColumns();
    gridContainer.isotope({
        resizable: false,
        layoutMode: 'masonry',
        masonry: {
            columnWidth: colW
        }
    });
}

///////////////////////////////
// Center Home Banner Text
///////////////////////////////

function centerHomeBannerContent() {
    var bannerContent = jQuery('.home #banner-content');
    var bannerContentTop = (windowHeightAdjusted/2) - (jQuery('.home #banner-content').actual('height')/2);
    bannerContent.css('margin-top', bannerContentTop+'px');
    bannerContent.show();
}

///////////////////////////////
// Initialize
///////////////////////////////

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".content-area").fitVids();
    mmenu_nav();
    jQuery('#video-background').height(windowHeight);
    video_resize();
    if(!isMobile()){
        getVideoBGs();
    }

    jQuery('body').imagesLoaded(function(){
        projectFilterInit();
        isotopeInit();
        centerHomeBannerContent();
    });

    jQuery(window).smartresize(function(){
        gridResize();
        //full_width_images();
        video_resize();
        mmenu_nav();
        centerHomeBannerContent()
    });

    //Set Down Arrow Button
    jQuery('#down-button').click(function(){
        jQuery.scrollTo( ".middle", {easing: 'easeInOutExpo', duration: 1000} );
    });

    //pull_out_the_quote();
    //full_width_images();

});

我们尝试对其进行修改，删除和调整，但似乎没有任何效果。在这一点上，我们认为它是由类 isotope-item 初始化的 css 转换，因此我们将其删除，这似乎有效，但我们不完全确定原因。是否有可能保留过渡并让同位素插件可靠地与它们一起运行？

Answer 1

哇哦，这个主题至少可以说是精神上的。

HTTP 请求如此之多，在执行时间内未能加载某些脚本也就不足为奇了。

是的，因为这是一个主题，我们不想为了更新清酒而搞砸太多东西，我建议使用autoptomize

它将您的所有脚本和 css 文件压缩并合并为一个简洁且易于下载的文件，从而不会发生渲染阻塞或部分加载

Answer 2

刚刚在http://uniplaces.micrositesonline.info/blog/cities/ 上查看了您的网站，您的网站上可能直接缺少“jquery.isotope.js”文件。确保 JS 文件夹中存在“jquery.isotope.js”。让我们试试