0

I want to random position image that reading from JSON data and I am not sure it is possible to do that? This is the sample of what I want: Sample image of what I want

This is what I have tried

    <div *ngFor="let item of img"></div
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>

    <div class="col-md-4>img.img</div>
    <div class="col-md-4>img.img</div>
    <div class="col-md-4>img.img</div>
Adam
  • 351
  • 1
  • 4
  • 15

2 Answers2

1

It does not seem so random, but you can layout your image like that using flex boxes:

const input = document.getElementById('input');
const root = document.getElementById('root');

const renderImages = (q) => {
  const images = Object.keys([...new Array(q)]).map(key => 'https://api.adorable.io/avatars/100/' + key);
  
  root.innerHTML = '';
  
  images.forEach(image => {
    const img = document.createElement('img');
    img.src = image;
    root.appendChild(img);
  })
}

window.addEventListener('DOMContentLoaded', renderImages(9));

input.addEventListener('change', (e) => {
  const q = parseInt(e.target.value);
  renderImages(q);
})
#root {
  width: 100%;
  height: 220px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
}

#root img {
  margin: 5px;
}

#root img:nth-child(3n) {
  margin: 60px 5px;
}

#root img {
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}

.clip-svg {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<input id="input" type="number" min="1" step="1" value="9" />
<br /><br /><br />
<div id="root"></div>
giuseppedeponte
  • 2,366
  • 1
  • 9
  • 19
0

If you meant to shuffle the images images' divs tags, Yes it's possible and you can do it using javascript of jquery

Look here: Shuffle all DIVS with the same class

Hosam.Yousof
  • 107
  • 9