Css图库的代码段。

Question

我想做这样的事情。

我自己已经制作了样本，但它并不是那么好。所以我想为这种图像库提供示例代码库。

Answer 1

由于人们通常会使用flexbox回答，我想使用display: inline-block为您提供解决方案。但是，我不确定你想如何正确处理容器中的图像，所以你可能要告诉我。

＆＃13;

＆＃13;

window.onload = function() {
  var par = $('.galleryRightBottomRow:last-child');
  var img = $('.galleryRightBottomRow:last-child img:last-child');
  var layer = $('<div>+5</div>');
  layer.css({
    'position': 'relative',
    'left': img.offset().left - par.offset().left,
    'top': '-' + img.outerHeight() + 'px',
    'width': img.outerWidth(),
    'height': img.outerHeight(),
    'display': 'block',
    'background-color': 'rgba(0, 0, 0, 0.7)',
    'color': '#fff',
    'font-size': '3rem',
    'line-height': img.outerHeight() + 'px',
    'text-align': 'center',
    'cursor': 'pointer'
  });
  img.after(layer);
};

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html,
body {
  width: 100%;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  font: 1.6rem/1.4 arial, sans-serif;
  padding: 2rem;
}

.gallery {
  height: calc(100vh - 4rem);
  position: relative;
}

.gallery > div {
  position: absolute;
}

.gallery div {
  display: inline-block;
  background-color: #f00;
  outline: 1px solid #000;
}

.gallery img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}

.galleryLeft {
  width: 66.67%;
  height: 100%;
  padding-right: 0.5rem;
}

.galleryButtonLeft,
.galleryButtonRight {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 5rem;
  height: 5rem;
  background-color: #000;
  color: #fff;
  line-height: 5rem;
  text-align: center;
  font-size: 4rem;
  border: none;
  outline: none;
  cursor: pointer;
}

.galleryButtonRight {
  left: 5rem;
  background-color: #333
}

.galleryRight {
  width: 33.33%;
  height: 100%;
  padding-left: 0.5rem;
  left: 66.66%;
}

.galleryRightTop {
  height: 50%;
  padding-bottom: 0.5rem;
}

.galleryRightBottom {
  height: 50%;
  padding-top: 0.5rem;
}

.galleryRightBottom img {
  max-width: calc(50% - 0.5rem);
}

.galleryRightBottom img:nth-child(2n) {
  margin-left: 1rem;
}

.galleryRightBottomRow {
  width: 100%;
  height: calc(50% - 0.5rem);
}

.galleryRightBottomRow:first-child {
  margin-bottom: 1rem;
}

.galleryRightBottomRow:last-child img:last-child:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gallery">
  <div class="galleryLeft">
    <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
    <input class="galleryButtonLeft" type="button" value="←" />
    <input class="galleryButtonRight" type="button" value="→" />
  </div>
  <div class="galleryRight">
    <div class="galleryRightTop">
      <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
    </div>
    <div class="galleryRightBottom">
      <div class="galleryRightBottomRow">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage"
        /><img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage">
      </div>
      <div class="galleryRightBottomRow">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage"
        /><img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image.jpg" alt="someImage" />
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;