javascript - 如何在点击类(class)时显示画廊的图像

Question

我正在为一个最初显示三个缩略图的网页创建一个图库选项卡。我的成就是在单击名为 show-all 的类时显示其余缩略图。为此，我正在设置画廊高度的动画以显示隐藏的内容。根据功能，一切顺利。但是我在这里面临的问题是，当我要使用 overflow:hidden 制作超过画廊的 height 的 hide 缩略图时，我仍然可以查看我第二行缩略图的某些部分。我只是想让他们躲起来。下面是我的代码块

HTML

<div class="gallery">
     <h3>Photos</h3>
 <a class="see-all" href="javascript:void(0)">See All</a>
    <div class="clear"></div>
    <div class="row">
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
    </div>
</div>

Jquery

$('.see-all').click(function(){
    $(this).parents('.gallery').animate({height: $(".gallery").get(0).scrollHeight}, 1000);
});

如有任何帮助，我们将不胜感激。

DEMO

注意:由于我的图像大小与以往不同，因此无法更改我的画廊高度。

Answer 1

无需依赖图库高度操作，您只需选择显示前 3 张图片并隐藏其余图片...这样您就不会受困于保持图片高度等问题。

当您点击查看全部时，它会显示其余部分。

JS BIN:http://jsbin.com/qoliqukoye/1/edit?html,js,output

        $(document).ready(function(){
            var x = 0;
            $('.row').children().each(function () {
                if (x >= 3) {
                    $(this).hide();
                }
                x++;
            });
            $(".see-all").click(function(){
                $('.row').children().fadeIn('slow');
            });
        });