Question

所以我想学习如何设置砌体图库。我在实现这一点上遇到了很多麻烦。该图库来自desandro

以下是我对HTML，CSS，JS的看法

＆＃13;

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});

＆＃13;

/** Masonry Photo Gallery **/

.grid {
  background: #EEE;
  max-width: 1200px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 1px;
}

.grid-item2 { width: 320px; }
.grid-item3 { width: 480px; }
.grid-item4 { width: 640px; }

.grid-item5 { height: 200px; }
.grid-item6 { height: 260px; }

＆＃13;

<html> 
    <head>
     <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>John Doe | Developer | 3D Modeler</title> 
    <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> 
    <script src="https://use.fontawesome.com/ebaac7d7fd.js"></script>
    <script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
<!--    <script src="/website/js/masonry.pkgd.min.js"></script>-->
    <link rel="stylesheet" href="css/main.css"> 
    </head>
<body>
<!-- Gallery -->
            <div class="grid" data-masonry= "{ "itemSelector": ".grid-item", "columnWidth": 160 }"></div>
            <div class="grid-item">
                <img src="img/chalkboard.jpg" alt="chalkboard"/>
               </div>
            <div class="grid-item2">
                <img src="img/computer.jpg" alt="computer"/>
               </div>
            <div class="grid-item3">
                <img src="img/girlincar.jpg" alt="girlincar"/>
               </div>
            <div class="grid-item4">
                <img src="img/guitar.jpg" alt="guitar"/>
               </div>
            <div class="grid-item5">
                <img src="img/working.jpg" alt="working"/>
               </div>
            <div class="grid-item6">
                <img src="img/woman-camera.jpg" alt="woman-camera"/>
               </div>
  </body>
  </html>

＆＃13;

我认为我在javascript部分没有做正确的事情。此外，我希望这个画廊有响应。任何帮助表示赞赏。

砌体图库

0 个答案: