javascript - 响应 "masonry-like"列而不使用砌体(试图避免位置 :absolute;)

Question

我有一个框的布局，所有框都向左浮动，当您单击它们的标题时，它们会滑动打开以显示内容。问题在于 float 的工作方式，当您单击以展开其中之一时，它会弄乱下面的行。

http://jsfiddle.net/FCCye/ <-- 单击其中一个标题以查看问题。

我通过像这样将它们分成几列来解决这个问题:

http://jsfiddle.net/caW4M/

这很好用，但是，布局需要响应，所以当窗口为 480 或更低时，它需要为 1 列。在 480 和 768 之间，它需要是 2 列。任何高于 768 的值，3 列。 (显然，jsfiddles 不显示我设置的断点。)

这是我为解决此问题而提出的代码，但它根本不起作用。我想知道是否有人可以告诉我我做错了什么。

// Create all three portfolio columns
    var one = $('<div/>').addClass('column').addClass('one');
    var two = $('<div/>').addClass('column').addClass('two');
    var three = $('<div/>').addClass('column').addClass('three');

    // Store all portfolio elements into variables once they're in columns
    var colElems = $('.column .project');

    // Now append the columns
    var winWidth = $(window).width();
    if ( winWidth > 480 && winWidth <= 768 ) {

        // Remove everything from columns and delete existing columns
        $(colElems).appendTo('#portfolio .content');
        $('#portfolio .content').remove(one,two,three);

        // Store portfolio elements into variables for safe-keeping
        var c1Elems = $('.project:nth-child(2n+1)');
        var c2Elems = $('.project:nth-child(2n+2)');

        // Perform appends into portfolio columns
        c1Elems.appendTo(one);
        c2Elems.appendTo(two);

        // Append portfolio elements to columns     
        $('#portfolio .content').append(one,two);

    }else{

        // Remove everything from columns and delete existing columns
        $(colElems).appendTo('#portfolio .content');
        $('#portfolio .content').remove(one,two,three);

        // Store portfolio elements into variables for safe-keeping
        var c1Elems = $('.project:nth-child(3n+1)');
        var c2Elems = $('.project:nth-child(3n+2)');
        var c3Elems = $('.project:nth-child(3n+3)');

        // Perform appends into portfolio columns
        c1Elems.appendTo(one);
        c2Elems.appendTo(two);
        c3Elems.appendTo(three);

        $('#portfolio .content').append(one,two,three); 
    }

所以，我想做的是在不在 480 到 768 之间时附加正常的 3 列(因为在移动设备尺寸上，这些列无论如何都会堆叠在一起)，而在 480 到 768 之间时，仅追加两列。所以我的想法是，在不同的尺寸下，我必须将所有的框从列中拉出来，删除列，然后根据窗口宽度重新添加不同数量的列。事实证明这是一次失败的尝试，所以如果有人能向我解释我做错了什么，我将不胜感激!

谢谢!

Answer 1

不是您问题的答案，但如果您遵循建议，那么您的问题将不再有趣。 ;-)首先，为什么不为不同的布局使用 CSS3 媒体查询？这就是他们的目的。

其次，使用像素值(或任何其他类型的绝对单位)来定义断点是“不好的做法”，即使很多作者确实这样做了!最好只使用像“em”这样的相对单位。

新的 Flexbox 模块也可能是您的一个选项，具体取决于支持的浏览器版本(尤其是 IE 8)。

为什么不使用“position: absolute”让扩展框不简单地与其他内容重叠？

好吧，用 Javascript 来做本应该用纯 CSS 来做的事情并不是一个好主意。当 JS 被停用时会发生什么？而且从性能的 Angular 来看，调整视口(viewport)的大小...... - 都很糟糕。

所以我的建议是彻底重新考虑您的方法。