Javascript 使用columnizer根据最小屏幕分辨率重新定义列数

我正在使用将我的内容拆分为列。请注意，我的网站有一个流体宽度容器。我一直在根据窗口的屏幕分辨率调用不同的Java脚本，这与CSS媒体查询的工作原理相同

minscreen用作不同的断点，我想用它来更改columnize函数的选项中定义的列数

这是我用来创建断点的函数之一：

/* Min Screen 480
----------------------------------------------------------------*/
function minScreen480(){
    document.body.style.overflow = "hidden";
        if ($(window).width() >= 480) {
            // Set stuff here
        }else{
            // Remove stuff here
        }
    document.body.style.overflow = "";
}

然后在window.resize上运行函数，如下所示：

下面是columnize函数本身：

$('.element').columnize({ columns: 2, lastNeverTallest: true });

我已经尝试了我能想到的一切，但似乎从来没有成功过。我不能将columnize函数放在我的minScreen480函数中，因为columnize已经构建为在调整大小时调整它的列。当我把它放在minScreen480函数中，并在window.resize上运行时，列开始成倍增加，结果变得一团糟

有经验的人能帮我吗

---

还是没能找到解决办法。我想编辑一下看看能不能得到一些帮助。谢谢

如果这个问题仍然存在：

关于列的乘法，在调整大小时——发生这种情况是因为columnizer有自己的调整大小功能，要停止这种效果，应该使用columnizer选项buildOnce

要重新聚集，请尝试使用“展开”：

jQuery(document).ready(function($){

 $(window).resize(function(){

    // remove all parent make by your jquery columnizer
    $('.column > *').unwrap();

    // re-initialize jQuery columnizer with 1 column

    $('.element').columnize({ columns: 1 });

 });

});

---

在这里找到它

如果这个问题仍然存在：

关于列的乘法，在调整大小时——发生这种情况是因为columnizer有自己的调整大小功能，要停止这种效果，应该使用columnizer选项buildOnce

要重新聚集，请尝试使用“展开”：

jQuery(document).ready(function($){

 $(window).resize(function(){

    // remove all parent make by your jquery columnizer
    $('.column > *').unwrap();

    // re-initialize jQuery columnizer with 1 column

    $('.element').columnize({ columns: 1 });

 });

});

---

在这里找到它

我在尝试解决相同问题时遇到了Tommi Kaikkonen的CSS3解决方案。我不确定您必须支持哪些浏览器，但这在IE10+、Webkit和iOS中运行良好

css3列获取内容并根据列宽或列计数css属性将其划分为列。前者将内容插入到具有您给定宽度的动态列中。后者以与您指定的列数相同的高度分发内容

在他的示例中，他使用CSS3属性column width来定义列的宽度，这允许列的数量在水平方向上动态迭代，而不是使用column count来指定列的数量，并允许根据需要动态调整高度

出于我的需要，我有固定数量的内容，因此我将使用媒体查询和列数来根据浏览器窗口大小控制我的内容所包含的列数

developer.mozilla.org/en-US/docs/Web/CSS/column-width抱歉，它只允许我发布两个链接

---

我在尝试解决同样的问题时遇到了Tommi Kaikkonen的CSS3解决方案。我不确定您必须支持哪些浏览器，但这在IE10+、Webkit和iOS中运行良好

css3列获取内容并根据列宽或列计数css属性将其划分为列。前者将内容插入到具有您给定宽度的动态列中。后者以与您指定的列数相同的高度分发内容

在他的示例中，他使用CSS3属性column width来定义列的宽度，这允许列的数量在水平方向上动态迭代，而不是使用column count来指定列的数量，并允许根据需要动态调整高度

出于我的需要，我有固定数量的内容，因此我将使用媒体查询和列数来根据浏览器窗口大小控制我的内容所包含的列数

developer.mozilla.org/en-US/docs/Web/CSS/column-width抱歉，它只允许我发布两个链接

---

退房可能是你需要的东西。@JosephDeeamer谢谢你的建议，但是FooTable是完全不同的东西。Columnizer将现有内容拆分为列。FooTable用于表格数据和控制要显示/隐藏的列。检出。可能是你需要的东西。@JosephDeeamer谢谢你的建议，但是FooTable是完全不同的东西。Columnizer将现有内容拆分为列。FooTable用于表格数据和控制要显示/隐藏的列。谢谢iamTonio。我很感激你的帮助，因为我还在努力解决这个问题。你提供的答案似乎让我更接近，但并不完全奏效。它的工作原理是成功地重新整理列，但由于脚本将不同的文本块包装在标记中，因此内容开始变得混乱，格式也不正确。有什么想法吗？@norsewulf除了上面的答案，但是不使用jquerys unwrap，而是缓存原点

---

页面上隐藏元素中的所有内容。调整大小时，用缓存的内容覆盖杂乱的内容，然后在上面重新应用columnizer。谢谢iamTonio。我很感激你的帮助，因为我还在努力解决这个问题。你提供的答案似乎让我更接近，但并不完全奏效。它的工作原理是成功地重新整理列，但由于脚本将不同的文本块包装在标记中，因此内容开始变得混乱，格式也不正确。有什么想法吗？@norsewulf除了上面的答案，但是不要使用jquerys unwrap，而是将原始内容缓存在页面上的隐藏元素中。调整大小时，请使用缓存内容覆盖混乱的内容，并在其上重新应用列式生成器。如果链接失效，您可以在答案中包含解决方案的一部分或至少一个解释。如果链接失效，您可以在答案中包含解决方案的一部分或至少一个解释。

jQuery(document).ready(function($){

 $(window).resize(function(){

    // remove all parent make by your jquery columnizer
    $('.column > *').unwrap();

    // re-initialize jQuery columnizer with 1 column

    $('.element').columnize({ columns: 1 });

 });

});