BricklayerJS_Test

by niuuin

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.2/bricklayer.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bricklayer/0.4.2/bricklayer.min.js"></script>
  </head>

  <body>

    <div class="bricklayer">
      <div class="item">
        <img src="https://dummyimage.com/1600x1200/c2ccff/393f8f&text=01" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1000x1200/c2ccff/393f8f&text=02" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1200x1600/c2ccff/393f8f&text=03" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/800x1200/c2ccff/393f8f&text=04" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1600x1200/c2ccff/393f8f&text=05" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1600x1600/c2ccff/393f8f&text=06" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1600x1200/c2ccff/393f8f&text=07" alt="">
      </div>
      <div class="item">
        <img src="https://dummyimage.com/1200x1600/c2ccff/393f8f&text=08" alt="">
      </div>
    </div>

  </body>

</html>

CSS

img,
 video {
   max-width: 100%;
   max-height: 100%;
 }

 .bricklayer-column-sizer {
   width: 33.3%;
 }

 .item {
   padding: .4rem;
 }

 .item img {
   width: 100%;
 }

 @media (max-width: 768px) {
   .bricklayer-column-sizer {
     width: 50%;
   }
 }

 @media (max-width: 425px) {
   .bricklayer-column-sizer {
     width: 100%;
   }
 }

JavaScript

var bricklayer = new Bricklayer(document.querySelector('.bricklayer'));