jQuery：在窗口调整大小上两次更新砌体列宽

Question

我正在尝试使用jQuery石工插件在列宽之间切换，具体取决于浏览器窗口的大小。 因此，如果浏览器窗口小于1700px，您将从4列切换到3列，那么当浏览器窗口小于1200px时，您将从3列切换到2。

jQuery(document).ready(function() {

    jQuery('#thumb-wrap').masonry({
      itemSelector: '#thumb-container',
      // set columnWidth a fraction of the container width
      columnWidth: function(containerWidth) {
            var num = (containerWidth > 1700) ? 4 : 3;
            var num = (containerWidth > 1200) ? 3 : 2;
            return containerWidth / num;
        }

      });
});

但是我在实现此功能时遇到问题，我可以使一个功能正常工作，但是事实证明很难两次切换列宽。 这是可能吗？

Answer 1

这是因为您两次使用了var num 。 声明之后，您无需再次声明。

var num = (containerWidth > 1200) ? 3 : 2;
num = (containerWidth > 1700) ? 4 : num;