Nahtloser responsiver Foto-Raster

Nehmen wir an, Sie haben eine Reihe von Bildern, die Sie anzeigen möchten, und das Ziel ist es, sie randlos zum Browserfenster zu bringen, ohne Lücken. Einfach nur, weil Sie denken, dass das cool wäre. Sie haben alle unterschiedliche Größen. Es macht Ihnen nichts aus, wenn sie neu skaliert werden, aber sie sollten ihr Seitenverhältnis beibehalten. So wie hier

Idealerweise halten wir die Markup-Struktur recht einfach, so etwa

<section id="photos">
  <img src="images/cat-1.jpg" alt="Cute cat">
  <img src="images/cat-2.jpg" alt="Serious cat">
  ...
</section>

Ohne jegliches CSS reihen sich die Bilder aneinander, da sie im Wesentlichen Inline-Blöcke sind

Wüsten von Weißraum

Aber das ist nicht ganz das, was wir wollen. Möglicherweise greifen Sie direkt zu einer JavaScript-Lösung. Möglicherweise das super coole Masonry-Projekt. Das Problem bei der JavaScript-Option ist, dass sie vom `window.resize`-Ereignis abhängt, was (zumindest für mich) Seiten immer träge erscheinen lässt (selbst wenn Sie hip sind und das „Unbouncing“-Ding machen).

Wir können das mit reinem CSS so hinbekommen, wie wir es wollen. Was wir brauchen, sind vertikale Spalten, in denen wir die Bilder platzieren. Auf diese Weise stapeln sich die Bilder übereinander und das Höhenproblem ist irrelevant.

Wir könnten gleiche Anzahlen von Bildern in geflochtene Divs einwickeln, aber das ist nicht sehr einfach auszubalancieren. Der Trick wird darin bestehen, **Masonry CSS** zu verwenden, bei dem die vertikalen Spalten durch die CSS3-Eigenschaft `column-count` erstellt werden. Ja, buchstäblich die Sache, bei der Sie Text automatisch in schmale Spalten setzen können.

Solange das Elternelement mit den mehreren Spalten so breit ist wie das Browserfenster (Standard) und der `column-gap` 0 ist, haben wir es geschafft. Indem wir die Breite des Bildes auf 100 % setzen, nehmen sie genau die Breite einer Spalte ein.

Hier ist das CSS

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

Aber was ist, wenn das Browserfenster schmaler wird? 5 Spalten mögen für ein sehr breites Browserfenster gut sein, aber für ein schmaleres zu viele (5 Bilder nebeneinander könnten zu schmal werden). Wir können das Problem ganz einfach lösen, indem wir mit Media Queries die Browserbreite testen und die Anzahl der Spalten entsprechend anpassen.

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Schick.

Demo

Siehe den Pen Seamless Responsive Photo Grid von CSS-Tricks (@css-tricks) auf CodePen.

Was an dieser Technik cool ist, ist, dass da sie rein aus CSS besteht, alles sehr reibungslos und schnell abläuft. Sie können Ihren Browser beliebig skalieren und beobachten, wie sich die Dinge sehr schnell skalieren und bewegen.

Was ist mit, wissen Sie.

Was die Browserunterstützung angeht, ist sie ziemlich gut, außer bei IE, wo sie nur in 10+ funktioniert. Ansonsten: Firefox 3.6+, Opera 11.1+, Safari 4+, Chrome 10+. Könnte sogar noch tiefer sein.

Sie könnten einen Fallback überspringen, weil er nicht so schlimm ist und nur ein paar weiße Lücken hat. Oder Sie verwenden die Modernizr/YepNope-Kombination (Modernizr kann ihn als `csscolumns` testen), um jQuery Masonry zu laden und zu sehen, was Sie damit machen können. Oder Sie testen ihn und schreiben Ihr eigenes JS, das die Bilder zählt, sie in gleiche Gruppen aufteilt und geflochtene Divs darum wickelt. Was immer Ihnen gefällt.

Super süße Katzen!!

Total. Die sind von LoremPixel. Für die Demo haben wir Bilder in zufälligen Größen mit jQuery geholt

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  $('#photos').append('<img src="//www.lorempixel.com/'+width+'/'+height+'/cats" alt="pretty kitty">');
}