javascript - 具有多个不同高度小部件的两列布局，如何使小部件可折叠并保持页面流动？

Question

我有一个正在处理的主页，它有 2 个等宽的列，页面上有多个小部件。该页面是响应式的，小部件的数量是可变的。目前我有一个解决方案，它运行良好并且不使用像 masonry 或 salvattore 这样的插件。我反对使用这些插件的原因是我不希望页面是两个固定的列，我希望小部件能够流动并适合可用空间。

这让我想到了我的问题 - 我希望能够折叠这些小部件中的任何一个，而其他小部件应该四处流动并适合剩余空间。这是我目前所拥有的原型(prototype):

http://codepen.io/charge-valtech/pen/bzJfj

这是我写的 jquery:

function layoutWidgets() {
  console.log('layout widgets');
  if ($(".left-widget").css("float") == "left") {
    $('.left-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition >= 30) {
        $(this).removeClass('left-widget').addClass('right-widget');
      }
    });
    $('.right-widget').each(function (index, value) {
      var widgetPosition = $(this).position().left;
      if (widgetPosition <= 30) {
        $(this).removeClass('right-widget').addClass('left-widget');
      }
    });
  }
}

layoutWidgets();
$(window).resize(layoutWidgets);

$('.collapse').click(function () {
  $(this).closest('.widget').toggleClass('collapsed');
});

但出于某种原因，如果我将 layoutWidgets 函数放在用于折叠小部件的点击函数中，它就不起作用。

有什么想法吗？

Answer 1

要么将您的代码放在 document.ready 函数中，要么在加载所有内容后将其包含在页脚中。您不能将点击事件附加到尚不存在的元素。