jquery - 调整大小时，div 的宽度恢复正常

Question

问题

我有两列:第一列具有响应宽度，而另一列具有固定宽度。我正在使用需要响应列宽度的插件，然后我制作了这个函数来计算宽度:

$(".container-content").css(
        "width",
        $(".site-container").outerWidth() - $(".sidebar").outerWidth()
    );

但是当页面加载时，宽度不正确，我必须调整窗口大小以固定宽度。

我的一些代码

CSS

.site-container {
    width: 98%;
    background-color: #fff;
    box-shadow: #b8b8b8 0 2px 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.container-body .container-content {
    overflow-y: hidden;
    position: relative;
}

如果您需要更多信息，请告诉我。

更新 v1

我相信我们离解决我的问题更近了。我的应用程序上有同位素来创建马赛克。当页面加载时，同位素被调用。我的马赛克结构是:ul > li。在 CSS 上，li 被定义为 display: none，以便在页面加载器消失后仅显示马赛克列表。

当 jQuery 显示 li 的内容时(使用 fadeIn())，我认为他没有正确计算宽度(或不完整)。

遵循代码:

// Isotope
jQuery("ul.products-list").isotope({
    itemSelector: "li",
    masonry: {
        gutterWidth: 15
    }
}, function () {
    $(this).parent().prepend("<div class=\"products-loader\"><p>Loading application</p></div>");
    $(".products-loader").delay(1000).fadeOut(300, function () {
        $("ul.products-list li").fadeIn("slow", function () {
            $(".products-loader").remove();
            $(".container-content").perfectScrollbar({
                wheelSpeed: 100
            });
        });
    });
});

有什么想法吗？

更新 v2 — 我解决了!

查看我自己的回答。

Answer 1

解决方案是从 display: none; 切换到 opacity: 0;。

我找到了解决方案 here .

谢谢大家!