Javascript 带有链接的响应式照片网格？

我想做一个像这样的照片网格

---

下面的网格应作为相应照片和描述的链接。谢谢

好吧，你可以这样做

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // On mouseover, change the height, and margin-left/top
        $('.article').on('mouseenter', this, function() {
            $(this).find('img').stop().animate({
                "height": 400,
                "margin-left": '-50px',
                "margin-top": '-50px'
             }, 500 );
        });

        // On mouseleave, everything goes back to normal :)
        $('.article').on('mouseleave', this, function() {
            $(this).find('img').stop().animate({
                "height": 300,
                "margin-left": 0,
                "margin-top": 0
             }, 500 );
        });
    });
</script>

$（文档）.ready（函数（）{
//在鼠标悬停时，更改高度和左/上边距
$（'.article'）。在（'mouseenter'，this，function（）上{
$（this.find（'img'）.stop（）.animate({
“高度”：400，
“左边距”：“-50px”，
“页边距顶部”：“-50px”
}, 500 );
});
//在mouseleave上，一切恢复正常：）
$（'.article'）。在（'mouseleave'，this，function（）上{
$（this.find（'img'）.stop（）.animate({
“高度”：300，
“左边距”：0，
“页边距顶部”：0
}, 500 );
});
});

这个款式呢

<style>
    .container {width:1280px; margin: 0 auto;}
    .article {width:300px; height: 300px; float:left; position:relative; overflow: hidden; margin: .5em;}
    .article .image img {width:auto; height:300px; display:block;}
    .article .info {position:absolute; left:0; bottom:0; width:100%;}
    .article .info h2, .article .info p {color: #f0f0f0; font-family: Arial, Verdana, serif;}
</style>

.container{宽度：1280px；边距：0自动；}
.article{宽度：300px；高度：300px；浮点：左；位置：相对；溢出：隐藏；边距：.5em；}
.article.image img{宽度：自动；高度：300px；显示：块；}
.article.info{位置：绝对；左侧：0；底部：0；宽度：100%；}
.article.info h2、.article.info p{color:#f0f0；字体系列：Arial、Verdana、serif；}

您可以使用这种HTML结构：

<div class="container">
    <article class="article">
        <a href="#">
            <div class="image"><img src="http://s12.postimg.org/hh8y6d8d9/1280x490_1.jpg" alt="image"></div>
            <div class="info">
                <h2>Title</h2>
                <p>Excerpt</p>
            </div>
        </a>
    </article>
    <!-- Repeat the article -->
</div>

这里有一个例子：

这里有一个例子

如果你想让这在你的页面上起作用，你必须包括引导，只需将以下代码复制并粘贴到你的

头上

标签：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

---

请阅读有关引导的更多信息。

太好了。让我们知道你是如何开始的。简单使用引导，使网格由3列组成，并将响应图像放在其中