【发布时间】：2020-02-07 23:18:34
【问题描述】：
我需要你的帮助。当我填充我的图片库并选择位于第二个、第三个......等位置的图像时，图像是静态的，不会动态地将位置更改为左起第一个。 （见屏幕）
我的代码：
product_gallery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style_gallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/gallery/js/gallery_button.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<div class="logo"><a href="" class="logo_link">Example Page</a></div>
<body>
<div class="nav_buttons">
<ul class="tabs">
<a data-filter=".group-1" href="#" class="group_link">Group 1</a>
<a data-filter=".group-2" href="#" class="group_link">Group 2</a>
<a data-filter=".group-3" href="#" class="group_link">Group 3</a>
<a data-filter=".group-4" href="#" class="group_link">Group 4</a>
<a data-filter=".group-5" href="#" class="group_link">Group 5</a>
<a data-filter=".group-6" href="#" class="group_link">Group 6</a>
<a data-filter=".group-7" href="#" class="group_link">Group 7</a>
<a data-filter=".group-8" href="#" class="group_link">Group 8</a>
</ul>
</div>
<div class="thumbnails grid" id="portfolio">
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-5"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-6"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-7"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-8"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-1"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-2"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-3"></a>
<a href="#"><img src="gallery/M01.jpg" alt="" class="group-4"></a>
</div>
</body>
</html>
style_gallery.css
@font-face {font-family: "ISOCT3"; src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot"); src: url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
body {
}
/** RESET **/
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/** THUMBNAILS GLOBALS **/
.thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnails a {
height: 300px;
margin: 2px;
border-radius: 2px;
overflow: hidden;
}
.thumbnails img {
height: 100%;
object-fit: cover;
transition: transform .3s;
}
.thumbnails a:hover img {
transform: scale(1.05);
}
/** THUMBNAILS GRID **/
.thumbnails.grid a {
width: calc(25% - 4px);
}
.thumbnails.grid a.double{
width: calc(50% - 4px);
}
.thumbnails.grid img {
width: 100%;
}
/** RESPONSIVENESS **/
@media (max-width: 1500px) {
.thumbnails.grid a {
width: calc(33.33% - 4px);
}
}
@media (max-width: 1000px) {
.thumbnails.grid a {
width: calc(50% - 4px);
}
.thumbnails.grid a.double{
width: calc(100% - 4px);
}
}
@media (max-width: 500px) {
.thumbnails.grid a {
width: calc(100% - 4px);
}
}
.logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin:auto;
padding-top: 28px;
padding-bottom:20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
}
@media only screen and (max-width: 800px) {
.logo {
font-family: ISOCT3;
font-size: 24px;
font-weight: bolder;
display: block;
color: #b8860b;
padding-top:25px;
margin: 0px auto 15px auto;
max-width: 90%;
height: auto !important;
letter-spacing: 2px;
}
}
.logo_link {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.group_link {
background-color: #D29990;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-shadow: 0 -1px 1px saturate( darken($pink, 20%), 20%);
text-decoration: none;
color: #fff;
padding: 5px 20px;
line-height: 50px;
@include border-radius(50%);
display: inline-block;
@include transition( all .2s ease-in-out);
&:hover {
background-color: saturate( $pink, 20%);
}
}
.nav_buttons{
margin: 0 auto;
padding-left: 20px;
}
gallery_button.js
$(document).ready( function () {
$('.tabs').find('a').click( function (e) {
var theFilter = $(this).data('filter');
e.preventDefault();
$('.tabs').find('a').removeClass('active');
$(this).addClass('active');
$('#portfolio').find('img').show(); $('#portfolio').find('img').not(theFilter).hide();
});
});
这是显示问题所在的屏幕：
【问题讨论】：
标签： javascript php jquery css reactjs