Question

我正在努力建立一个响应迅速且流畅的画廊，如下所示：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 divs

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

由于

Answer 1

你一定要看看Filtrify，一个HTML5和jQuery标记和过滤插件。它使用HTML5 data-属性来存储有关内容的元数据（附加数据），即图片 - 日期，艺术家，流派，价格等。

有很多examples。

使用twitter bootstrap选择带有类别的流畅响应图库项目

1 个答案: