我与你分享一个响应的画廊，使用Magnific Popup插件和一些CSS代码在项目中使用设计。 插件：Magnific Popup

HTML

 <div id="resgal">
 
 <a href="http://photostockeditor.com//asset/1080/d7/d706/PSE156.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/d7/d706/PSE156.jpg) no-repeat scroll center center / cover;"></div></a>
 <a href="http://photostockeditor.com//asset/1080/4a/4ae0/PSE155.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/4a/4ae0/PSE155.jpg) no-repeat scroll center center / cover;"></div></a>
 <a href="http://photostockeditor.com//asset/1080/16/1607/PSE154.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/16/1607/PSE154.jpg) no-repeat scroll center center / cover;"></div></a>
 <a href="http://photostockeditor.com//asset/1080/3e/3eea/PSE153.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/3e/3eea/PSE153.jpg) no-repeat scroll center center / cover;"></div></a>
 <a href="http://photostockeditor.com//asset/1080/c4/c47d/PSE152.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/c4/c47d/PSE152.jpg) no-repeat scroll center center / cover;"></div></a>
 <a href="http://photostockeditor.com//asset/1080/1c/1c65/PSE147.jpg" class="pop"><div class="item" style="background: url(http://photostockeditor.com//asset/1080/1c/1c65/PSE147.jpg) no-repeat scroll center center / cover;"></div></a>
 
 </div>

main.css

body{
 background-color:#000;
}


.item img{
 position:absolute;
 width:100%;
 transform: translate(0%, -50%);
 top:50%;
 
}

div#resgal:hover .item {
 opacity: 0.3;
}
div#resgal:hover .item:hover {
 opacity: 1;
}

.item a{
 width:100%;
 height:100%;
 
}

.item {
 
 transition: .8s opacity;
 background-color:#000;
 float:left;
 width:33.3%;
 height:350px;
 position:relative;
 overflow:hidden;
 font-size: 0;

}
 


@media screen and (max-width: 1220px) {
 .item { height: 250px; width:50%; }
}


@media screen and (max-width: 440px) {
 .item { height: 200px; width:100%; }
}

main.js

 $('#resgal').magnificPopup({
 delegate: 'a',
 type: 'image',
 closeOnContentClick: false,
 closeBtnInside: false,
 mainClass: 'mfp-with-zoom mfp-img-mobile',
 image: {
 verticalFit: true,
 titleSrc: function(item) {
 }
 },
 gallery: {
 enabled: true
 }
 
 
 });

-END-