修改 jQuery 插件 Columnizer

Question

我正在尝试修改 jQuery Columnizer 插件以在加载动态/托管内容的导航菜单上创建大型菜单效果。业务规则是菜单项应该默认为 2 列（它们当前默认为 1），如果列的高度超过一个高度 - 在这种情况下，我放置 400px - 然后创建一个新列。如果超过 800 像素，则创建第 4 列。

我修改了此处显示的 Columnizer 插件的源代码（我用 //jvirgo 注释了我的代码）：http://screenquill.com/jquerytest/autocolumn.js 和这个小提琴：

http://jsfiddle.net/P4wVV/

我的修改在这里： // jvirgo

if (targetHeight() > 100) {
numCols == 3;
}
if (targetHeight() > 200) {
numCols == 4;
}

但是，这完全破坏了 columnizer 的功能。我的语法不正确还是我针对高度的变量定位错误？

Answer 1

我认为您要修改的变量是“options.columns”，而不是 maxHeight。我可能会在设置 maxHeight 变量之后将您的修改放在您现在所在位置的上方几行。这是未经测试的：

var maxHeight = $(this).height();
// mod
if (maxHeight > 100) { options.columns = 2 }
if (maxHeight > 200) { options.columns = 4 }
// end mod
var $cache = $('<div></div>');

您还可以在自己的函数中调用 columnizer，该函数测量高度并保持未修改的 columnizer（可能用于站点内的其他地方）：

$('div.subBody').each(function() {
  var h = $(this).height();
  if (h > 100) {
    var c = h > 200 ? 4 : 2;
    $(this).columnize({columns:c});
  }
 });

不确定这是针对这种情况的最佳代码，但可能是我会采取的方法。