Flickr网格系统

Question

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

我已经看过同位素（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 
    } 
});