Foundation 6框架下点击accordion后Masonry布局高度不增加问题

核心思路：Foundation 6的Accordion组件在展开、收起动画完成后会抛出专有事件，监听该事件主动触发Masonry重新计算布局即可解决高度识别异常的问题。

修改后的JS代码 #

$(document).foundation();

// 存储Masonry实例方便后续调用
let masonryInstance;

$(window).on('load', function(){
  masonryInstance = $('.locais-cards').masonry({
    itemSelector: '.locais-cards .cell'
  }).data('masonry');
});

// 监听accordion展开、收起完成事件，触发Masonry重排
$(document).on('down.zf.accordion up.zf.accordion', function() {
  if(masonryInstance) {
    masonryInstance.layout();
  }
});

补充说明 #

• 事件down.zf.accordion对应Accordion面板展开完成动作，up.zf.accordion对应面板收起完成动作，同时监听两个事件可以保证两种操作都能触发布局重算
• 采用事件委托的方式绑定事件，兼容后续动态新增的Accordion组件场景

内容的提问来源于stack exchange，提问作者Yeltsin Lima