4

编辑：

我为此做了一个 JSFiddle ......但我认为它不能正常工作，因为 (window).resize(); 我没怎么玩过 JSFiddle，所以我觉得我做错了。

http://jsfiddle.net/beefchimi/uhw3D/25/

如果有人可以帮助解决这个问题，我将不胜感激。

所以我一直在努力寻找用 jQuery 重现 CSS 媒体查询的绝对最佳方法。我几乎只使用 CSS 媒体查询，但我现在正在处理一个问题，我需要能够动态计算一个值并将其应用于窗口调整大小的元素。

使用下面的代码，我可以在每 1 个像素增量处检查窗口宽度。首先，我想知道这是否具有良好的性能，是否有办法只在我们从断点移动到断点（480 / 768 / 1024）而不是沿途的每个像素时执行函数。

然而，我的问题是：

我正在检查当前布局中有多少元素的 CSS 属性为 left: 0; 然后我将元素的数量乘以 240px 并将其应用为容器的高度值。

低于 720 像素，此元素的高度需要为“自动”。这工作正常。但是，如果我从 320 像素开始上升，并且遇到了第一个断点（720 像素），我就会将正确的高度应用到我的容器上，但是一旦我到达高于该值的断点（960 像素），高度就永远不会更新。我想知道我做错了什么导致无法计算和应用新值。

$(document).ready(function() {

    function checkWidth() {

        var windowSize = $(window).width();
        var elementCount = $('#casestudy-content article').filter(function() { return $(this).position().left === 0 }).length;

        if ( windowSize >= 720 && windowSize <= 959 ) {

            console.log("Greater than 720 and less than 960");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 960 && windowSize <= 1199 ) {

            console.log("Greater than 960 and less than 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else if ( windowSize >= 1200 ) {

            console.log("Greater than or equal to 1200");

            console.log(elementCount);

            $('#casestudy-content').css('height', elementCount * 240 + 'px');

        }

        else {

            $('#casestudy-content').css('height', 'auto');

        }

    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

});

任何帮助将不胜感激。

编辑

所以我发现，如果我删除这些元素上的 CSS 过渡，我的功能就可以完美运行。

有趣的是，我的 console.log(elementCount) 在我到达断点的那一刻报告了正确的值，所以我认为这应该意味着我不必担心转换时间，但显然如此。我怎样才能延迟这个功能，以便我可以保持过渡？如果我的转换需要 0.2 秒，我需要延迟我的函数触发这么多。对此有什么帮助吗？

4

1 回答 1

1

（当我们从断点移动到断点时执行函数）

在您当前所在的断点处保存到变量中：

var breakpoint;
function checkWidth() {
{...}
if ( windowSize >= 720 && windowSize <= 959 && breakpoint != 720) {
        breakpoint = 720;
} else if ( windowSize >= 960 && windowSize <= 1199 && breakpoint != 960) {
        breakpoint = 960;
} etc..

http://jsfiddle.net/uhw3D/47/

（但是一旦我在上面的断点（960px），高度永远不会更新）

当然，section当窗口大小大于 500 像素时高度不会改变，因为只有 3 行（100 像素 x 3 = 300 像素高度），并且最大宽度section始终为 500 像素。（每行 5 个盒子），你有 14 个盒子。做计算。

（我怎么能去延迟这个功能）

我不知道你为什么需要这个，但你可以使用setTimeout()

你可以这样做：

$(window).resize(function() {
    setTimeout(checkWidth, 200); // 1000 milliseconds = 1 second
 });

在窗口调整大小时，该功能将在 0.2 秒后触发

我希望我确实理解你的意思，否则请解释更多你想要做什么。

于 2012-09-01T19:58:37.450 回答