Quicksand 因此，为jQuery jumpy transition提供了另一个Razorjack流沙——JSFIDLE

当使用流沙过滤时，所有图像在滑入位置之前都以跳跃开始。我在这里读了很多问答，但我没有摆脱这种跳跃

在提供的示例/jsfiddle中，可以通过以下步骤再现错误：

• 调整窗口大小，使with包含两个图像。输出应显示2x2图像的网格
• 按“全部”过滤全部（尽管已显示全部）
• 按“Hard”（硬）以硬过滤。图像现在在滑入位置之前快速“向上跳”

这里提供了一个JSFIDLE：

外部图书馆：

• jquery3.0

HTML:

JavaScript

var $list = jQuery("#pzl_thumbs");
var $data = $list.clone();
var $filteredData = null;

function filter(difficulty) {

    var sel = ((difficulty!='all')? 'li.pzl_d_' + difficulty : 'li') ;

    $filteredData = $data.find(sel);
    $list.quicksand($filteredData, {
        duration: 1800, 
        adjustHeight: false, 
        });
}

---

问题是

最大高度：100%的
.pzl_拇指li
。
您需要删除它，并允许
li
元素根据其内容自由调整大小

因此，请修改以下内容：

.pzl_thumbs li,
.img_thumbs {
  background-color: transparent;
  display: block;
  max-height: 100%;
}

为此：

.pzl_thumbs li,
.img_thumbs {
  background-color: transparent;
  display: block;
}

如果需要
最大高度：100%
对于
.img_拇指
，将其移到此处：

.img_thumbs {
  height: 192px;
  max-height: 100%;
}

请参阅。
谢谢！一个完美的答案，我很高兴获奖！我只是想告诉你，StackOverflow告诉我必须再过8个小时才能给你奖金。@AndreasLundgren不客气。我很乐意帮忙，并提前感谢你的赏金。
.pzl_thumbs li,
.img_thumbs {
  background-color: transparent;
  display: block;
}

.img_thumbs {
  height: 192px;
  max-height: 100%;
}