html 使用CSS和Masonry的全屏响应图库

Posted 2021-05-11

/* --- First we need to enable your scrollbar. If we do not do this you will get incorrect spacing between items with Masonry. --- */
html {
    overflow-y: scroll;
}

/* --- We need to set a percentage-based width for the columns and adjust the width according to the browser size using CSS media queries. 
We have initialized Masonry to accept grid-sizer as input for the width. This means we also need to set the width in the CSS for this class. --- */
.grid-sizer { width: 20%; }
.item { width: 20%; }

@media screen and (max-width: 1224px) {
  .grid-sizer { width: 33.33%; }
  .item { width: 33.33%; }
}

@media screen and (max-width: 720px) {
  .grid-sizer { width: 50%; }
  .item { width: 50%; }
}

@media screen and (max-width: 480px) {
  .grid-sizer { width: 100%; }
  .item { width: 100%; }
}

/* --- Overlay  - Next, we make an overlay that will pop up when you hover your mouse over the images. 
We can use rgba to make it semi-transparent. This is pretty basic so we will move straight on to the CSS of this part.--- */
.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.overlay .title {
    text-align: center;
    font-size: 30px;
}

.overlay .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.80);
    width: 100%;
    margin: 0;
}

.overlay .description p {
    margin: 20px;
}

.item:hover .overlay {
    display: block;
}

$(window).load( function() {

    $('#container').masonry({
        "itemSelector": ".item",
        "columnWidth": ".grid-sizer",
    });

});

<!--- In order to make this gallery, we will first require… images of course!

Luckily there are placeholder services that can easily let us use dummy images. 
There is (among others) placehold.it, placezombies.com, and its more cute sibling – 
which we will be using – placekitten.com

Our basic set-up will look like this: --->

<div id="container">
		<!-- This will make sure our size stays right when using Masonry -->
		<div class="grid-sizer"></div>

		<!-- This is what Masonry will tile for you -->
		<div class="item">

			<!-- An image, of course! -->
			<img src="http://placekitten.com/650/450" class="image">

			<!-- This is the overlay for the hover -->
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
        ...
</div>