Question

如何创建像Flickr探索页面这样的网格系统？ https://www.flickr.com/explore

我研究了Isotope（isotope.pkgd.js），但我似乎无法根据图像的大小排列网格。

到目前为止，这是我想出的：

HTML：

<h1>Isotope - masonry layout mode</h1>

<div class="isotope">

  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div>   
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div>   
  <div class="item"></div>  
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div>   
  <div class="item"></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div>   
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item width2 "></div>
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 

</div>

CSS：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- isotope ---- */

.isotope {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .item ---- */

.item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.item.width2 { width: 200px; }
.item.height2 { height: 200px; }

JavaScript：

// external js:
// http://isotope.metafizzy.co/isotope.pkgd.js

$( function() {

  $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });

});

Answer 1

我不是100％确定您按图像尺寸订购的含义。但为了获得flickr的效果，我会尝试这样的事情：

layoutMode：'packery'

$('.isotope').isotope({
    itemSelector: '.item',
    layoutMode: 'packery',
    masonry: {
        columnWidth: 100
    }
});

Flickr网格系统

1 个答案: