0

问题

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

$(".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

我相信我们离解决我的问题更近了。我的应用程序中有同位素来创建马赛克。当页面加载时，Isotope 被调用。我的马赛克结构是：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 — 我解决了！

看我自己的答案。

4

2 回答 2

2

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

我在这里找到了解决方案。

谢谢大家！

于 2013-06-07T16:13:29.030 回答
0

第一个想法：

您应该确保在 DOM 准备就绪时运行 jQuery 代码：

$('document').ready(function(){
    $(".content-container").css("width", $(".site-container").outerWidth() - $(".sidebar").outerWidth());
});

或者至少在它引用的 html 之后（在某些情况下可能不起作用）。

如果您希望获得的组件的大小outerWidth()取决于必须加载的 ex: 图像，那么即使上述内容也不够。然后你必须把你的代码放在一个window.load处理程序中。

$(window).load(function() {
    /* your code*/
}

简而言之：document.ready在 DOM 准备就绪时触发，而不是window.load在页面上的所有内容都加载时触发。供参考阅读here或here

在旁注中：注意到不同之处：

.content-container [JS] <> .container-content [CSS] 这是故意的吗？

于 2013-06-07T13:40:43.080 回答