使用Isotope插件时可排序元素出现异常抖动问题求助

核心原因 #

1. .item元素的全局过渡动画（transition: all .5s）和Isotope自身的布局动画冲突，导致元素位置变化时出现双重过渡，引发抖动
2. 初始化代码中重复调用排序方法，触发多次不必要的布局重绘
3. 缺少渲染性能优化，浏览器无法提前预判元素的变换操作

具体修复步骤 #

1. 修正CSS中的过渡属性

将.item的全局过渡改为仅针对需要动画的属性，避免影响Isotope的布局变换：

.item {
  width:250px;
  min-height:300px;
  margin:20px;
  padding:15px;
  background:rgba(0,0,0,.25);
  border-radius:5px;
  box-sizing:border-box;
  /* 修改过渡属性，只针对背景、边框、阴影，排除transform/position */
  transition: background-color .5s, box-shadow .5s, border-color .5s;
  -moz-transition: background-color .5s, box-shadow .5s, border-color .5s;
  -webkit-transition: background-color .5s, box-shadow .5s, border-color .5s;
  -o-transition: background-color .5s, box-shadow .5s, border-color .5s;
}

同时给容器和元素添加性能优化属性，提升渲染流畅度：

#masterlist, .item {
  will-change: transform;
}

2. 清理JS中的重复排序调用

删除初始化代码中重复触发排序的冗余代码，避免多次布局重绘：

// 删掉以下三行重复代码
$grid.isotope({ sortBy : 'name' });
$grid.isotope({ sortBy : 'age' });
$grid.isotope({ sortBy : 'original-order' });

如果需要设置默认排序，直接在Isotope初始化配置中添加：

var $grid = $('#masterlist').isotope({
  itemSelector: '.item',
  layoutMode: 'fitRows',
  getSortData: {
   name: '.name',
   age: '.age parseInt',
  },
  sortBy: 'original-order' // 这里设置默认排序规则
});

3. 确保元素尺寸稳定

如果所有.item元素高度一致，建议把min-height改为固定height，避免Isotope布局时重新计算元素高度：

.item {
  /* 替换min-height为固定height（元素高度一致时适用） */
  height:300px;
}

额外提示 #

• 你的代码已经通过imagesLoaded确保图片加载完成后再布局，这部分无需修改
• 避免给Isotope容器或元素添加overflow: auto以外的溢出属性，防止布局偏移

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