2

我正在使用columnizer jQuery 插件将我的内容拆分为列。请注意，我的网站是响应式的，具有流体宽度容器。我一直在根据窗口的最小屏幕分辨率调用不同的 javascript，这与 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：

$(window).resize(function(){
    minScreen480();
}).trigger('resize');

这是 columnize 函数本身：

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

我已经尝试了我能想到的一切，但它似乎永远无法正常工作。我不能将columnize()函数放在我的minScreen480()函数中，因为columnize()它已经构建为在调整大小时调整它的列。当我将它放在minScreen480()函数中并在 上运行时window.resize，列开始增加，变得一团糟。

有更多经验的人可以帮助我吗？

仍然无法提出解决方案。想我会编辑看看我是否能得到一些帮助。谢谢！

4

2 回答 2

4

如果这个问题仍然存在：

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

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

并重新列，尝试使用展开：

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 });

 });

});

在这里找到它http://wpquestions.com/question/show/id/2179

于 2013-01-28T06:11:13.713 回答
0

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

“css3 列获取内容并根据列宽或列数 css 属性将其划分为列。前者将内容插入到动态数量的列中，并具有您给它的宽度。后者将相同高度的内容分配给你给它的列数。”

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

根据我的需要，我有固定数量的内容，因此我将使用媒体查询并column-count根据浏览器窗口大小来控制我的内容包含在其中的列数。

  1. CSS3 列数
  2. developer.mozilla.org/en-US/docs/Web/CSS/column-width （对不起，它只让我发布两个链接）
于 2014-01-22T15:02:59.523 回答