0

我正在尝试制作一个响应迅速且流畅的画廊，如下所示：http ://dev-so12.fr/Akram/murals/

通过单击其中一个类别，图像会消失或出现，仅让该类别的图像可见。

我想要同样的行为。我正在使用 twitter bootstrap，并尝试了不同的方法。第一个是这个标记：

<div class="existing liste container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp8.jpg" class="attachment-medium" alt="hp8">          
                </div>
                <div class="description">
                    bla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp6.jpg" class="attachment-medium" alt="hp6">          
                </div>
                <div class="description">
                    bla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp4.jpg" class="attachment-medium" alt="hp4">          
                </div>
                <div class="description">
                    blabla
                </div>
            </div>

            <div class="span3">
                <div class="img">
                    <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp2.jpg" class="attachment-medium" alt="hp2">          
                </div>
                <div class="description">
                    blabla
                </div>
            </div>
            </div><div class="row-fluid">
            <div class="span3">
                <div class="img">
                    <img width="243" height="243" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/bati1.jpg" class="attachment-medium" alt="bati1">  
                </div>
                <div class="description">
                    blabla
                </div>
            </div>
            </div></div>

但这有一个问题，即每 4 个图像创建一个新行，所以如果我删除一个图像，它将没有良好的行为。

我能想到的另一个标记是相同的，但只是我有一个通用行，然后只有 span3 div

这个标记的问题是我不知道如何去掉第五个图像的边距，第十个......我可以用一些 javascript 来解决这个问题。但是如果我能避免它，那就太好了，所以如果有人有任何想法，我会很高兴听到它:)

谢谢

4

1 回答 1

1

您绝对应该看看 Filtrify，一个 HTML5 和 jQuery 标记和过滤插件。它使用 HTML5data-属性来存储有关图片的元数据（附加数据） - 日期、艺术家、流派、价格等。

它有大量的例子有据可查。

于 2013-05-01T09:29:27.460 回答