collection-repeat of background images in responsive columns

In this example below you will see how to do a collection-repeat of background images in responsive columns with some HTML / CSS and Javascript

This Pen shows how a collection-repeat with a responsive grid of divs with background-images, where the number of columns depends on the width of the screen,

Thumbnail
This awesome code was written by -kaik-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -kaik- ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>collection-repeat of background images in responsive columns</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="myApp">
<head>
  <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js?4"></script>
  <link rel="stylesheet" href="https://code.ionicframework.com/nightly/css/ionic.css">
</head>
<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">A Lot of Images!</h1>
  </ion-header-bar>
  <ion-content>
    <div collection-repeat="photo in main.photos" style="display:inline-block;" class="responsive col">
      <div class="myItemImage" style="background-image:url({{photo}});">
      </div>
    </div>
  </ion-content>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-kaik-/collection-repeat-of-background-images-in-responsive-columns-QjqEXG */
.myItemImage{
  min-width:150px;
  min-height:150px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}


@media (max-width: 300px){
    .responsive {
        max-width: 100%;
        -webkit-box-flex:0;
        -webkit-flex:0 0 100%;      
        flex:0 0 100%;      
    }
}

@media (min-width: 301px) and (max-width: 450px) {
    .responsive {
        max-width: 50%;
        -webkit-box-flex:0;
        -webkit-flex:0 0 50%;      
        flex:0 0 50%;      
    }
}

@media (min-width: 451px) and (max-width: 600px) {
    .responsive {
        max-width: 33%;
        -webkit-box-flex:0;
        -webkit-flex:0 0 33%;      
        flex:0 0 33%;      
    }
}

@media (min-width: 601px){
    .responsive {
        max-width: 25%;
        -webkit-box-flex:0;
        -webkit-flex:0 0 25%;      
        flex:0 0 25%;      
    }
}

/*Downloaded from https://www.codeseek.co/-kaik-/collection-repeat-of-background-images-in-responsive-columns-QjqEXG */
var myApp = angular.module('myApp', ['ionic']);

myApp.controller('MainCtrl', function() {
  this.photos = [];
  for (var i = 0; i < 1000; i++) {
    this.photos.push('http://lorempixel.com/250/250?q='+(i%17));
  }
});

Comments