MaterializeCSS 的 Masonry 图像设计问题 "materialboxed" class

Question

我用纯 CSS 创建了砖石图像设计。
Link here to codepen (only html and css) No materialize CSS and JS

但是，我想要来自 materializeCSS 的 `materialboxed` class 的效果

Link to materialbox class from materializeCSS

问题是，当我将 materialboxed class 添加到图像时，砌体布局发生了变化

link to codepen with masonary design + materializeCSS

Expected Result

Actual Result

预期结果

.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}

<section class="container">
  <div class="gallery">
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>
    <div class="img">
      <img  src="https://placeimg.com/640/480/any" alt="image">
    </div>

  </div>
</section>

设计示例不适用于 class materializedbox

document.addEventListener("DOMContentLoaded", function () {
  var elems = document.querySelectorAll(".materialboxed");
  M.Materialbox.init(elems);
});

.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <section class="container">
      <div class="gallery">
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
      </div>
    </section>

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Answer 1

您可以将完整的宽度和高度添加到 material-placeholder 以使其正常工作。

document.addEventListener("DOMContentLoaded", function () {
  var elems = document.querySelectorAll(".materialboxed");
  M.Materialbox.init(elems);
});

.gallery {
  position: relative;
  height: auto;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 2vh;
  grid-auto-flow: dense;
}
.gallery .img {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.gallery .img:first-child {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(2n + 3) {
  grid-row-start: span 2;
}

.gallery .img:nth-child(4n + 5) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.gallery .img:nth-child(6n + 7) {
  grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
  grid-column-start: span 1;
  grid-row-start: span 1;
}

.gallery .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(100);
  transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
  filter: brightness(1) grayscale(0);
}
.material-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) {
  .gallery {
    grid-template-columns: auto auto auto;
  }
  .gallery .img img {
    filter: brightness(1) grayscale(0);
  }
}

@media only screen and (max-width: 425px) {
  .gallery {
    display: block;
  }
  .gallery .img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 10px 0;
  }
  .gallery .img img {
    display: block;
    filter: brightness(1) grayscale(0);
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

    <section class="container">
      <div class="gallery">
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
        <div class="img">
          <img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
        </div>
      </div>
    </section>

    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

MaterializeCSS 的 Masonry 图像设计问题 "materialboxed" class

Masonry images design issue with MaterializeCSS "materialboxed" class

html

javascript

css

materialize

预期结果

设计示例不适用于 class materializedbox