Question

我正在尝试使用Quicksand制作可过滤的投资组合。

我几乎得到了它，但我对过渡效果有疑问。这是事情，我有一行与以下div，重复四次（4行x 3列）：

                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="dog" data-id="id-1">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/dog1.jpg" alt="">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="cat" data-id="id-2">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/cat1.jpg" alt="">
                    </a>
                </div>
                <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-type="bird" data-id="id-3">
                    <a class="thumbnail" href="#">
                        <img class="img-responsive" src="images/bird1.jpg" alt="">
                    </a>
                </div>

它看起来很棒，但当我按任何类别（“狗”，“猫”，“鸟”或“全部”）进行过滤时，在过渡时间内，流沙会隐藏几个div（这没关系）和图像被调整大小（它们看起来更大），因为它们具有响应性（col-md），而这并不是我正在寻找的效果。

我看到一个使用“ul”而不是div的示例，但我不知道如何将它与bootstrap类混合。

有解决方法吗？

提前致谢！

Answer 1

我将其添加到JavaScript中：

$portfolio.quicksand($filteredData, {
    duration: 600,
    adjustHeight: 'auto', //this
    adjustWidth: 'auto',  //and this
    easing: 'swing'
}

Bootstrap 3 + Quicksand.js可过滤的投资组合 - 图像在转换中调整了大小

1 个答案: