Система сетки Flickr

Как мне создать сетку наподобие страницы исследования 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
    }
  });

});

javascript css grid masonry jquery-isotope
person user3145336    schedule 07.01.2016    source источник
comment
Это может помочь: stackoverflow.com/a/37157988/1291916   -  person Daniel    schedule 11.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я не на 100% уверен в том, что вы имеете в виду под порядком по размеру изображения. Но чтобы получить эффект flickr, я бы попробовал что-то вроде этого:

layoutMode: 'packery'

$('.isotope').isotope({
    itemSelector: '.item',
    layoutMode: 'packery',
    masonry: {
        columnWidth: 100
    }
});
person Action_Turtle    schedule 07.01.2016
comment
Важно отметить, что режим макета упаковки не включен в isotope.pkgd.js и должен быть установлен отдельно. mode.pkgd.min.js" rel="nofollow noreferrer">макет упаковки - person Macsupport; 07.01.2016