Is it feasible to display an image at a random position within a loop?

Is it possible to randomly position an image sourced from JSON data? I am uncertain about this. Here is a sample of what I am aiming for: https://i.sstatic.net/4AtGk.jpg

This is my attempted code

    <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>
htmlcssbootstrap-4

Answer №1

It may not appear entirely random, but you can achieve a layout like this 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>

Answer №2

If you were hoping to rearrange the order of image divs, it can be done using either javascript or jquery.

Take a look at this link for more information: Shuffle all DIVS with the same class

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to establish a universal font for all apps within ant design?

I am currently working with NextJS version 14 and I have the following setup: In my globals.css file, I have imported a Google font like so: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800& ...

cssnext.jsantd

Encountering challenges when adjusting height based on screen size in Angular 6

Utilizing HostListener to adjust the height based on screen size works well. However, during page load, "event.target.innerHeight" returns undefined until the browser height is changed. To address this issue, the value needs to be initialized. Initially, i ...

javascriptjqueryangularjsangularbootstrap-4

How can we use jQuery to change the format of a

I'm working on a project where I want the calendar to display the date that the user picks. Right now, my "{{date}}" is in the format 2016-01-11, but it keeps showing one day before the selected date. I would like it to display as mm/dd/yyyy. I belie ...

jqueryhtml

Is it possible to manipulate videos embedded in an iframe using javascript?

It's common knowledge that JavaScript commands from Google can be used to control YouTube videos, while Vimeo provides its own JavaScript commands for their videos. Both videos are typically embedded within 'iframes' on websites. I'm ...

javascriptjqueryhtmliframe

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

javascripthtmlcssbootstrap-5

Using Tailwind CSS to center a NexJS <Image /> component within a modal

In an effort to style my MapBoxGL popup content, I am working on aligning the text above the image to the left and centering the image below within the popup. As shown in the image below, this is currently proving to be a challenge as I transition from usi ...

cssreactjsnext.jstailwind-cssnext-images

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

javascriptjqueryhtml

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

javascriptjqueryhtmlcssnumbers

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

htmlcss

What could be causing only certain portions of my CSS to be applied?

I've been struggling to get rid of the gray border around the SIGN UP button in the tbody section. I've tried applying classes (along with the ID) and using pseudo classes like :4th-child {border:none}, but nothing seems to work. The only solutio ...

htmlcss

Find and conceal the object within the list that includes the term "Ice"

The teacher's assignment is to create a radio button filter that hides items with the word "Ice" in them, such as "Ice Cream" and "Iced Tea." Here is the current code I have been working on: <!DOCTYPE html> <html> <head> <me ...

javascriptjqueryhtmlfunctionjquery-ui

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

htmljquerycanvasdrag-and-dropchart.js

Incorporate seamless integration by using the npm install command

I am currently facing an issue where I need to identify and remove unused dependencies from my package.json file every time I run npm install for my app. Is there a method to automatically include the npm package https://www.npmjs.com/package during the n ...

javascripthtmlnode.jsexpressnpm

Issue with symbol not rendering correctly in Email Body when setting width to '100%' in Postman

I'm currently working on sending emails using APIS in NodeJS. The issue I am facing is related to the CSS code with '%' symbols triggering errors when attempting to send the email via Postman, resulting in a 500 error. However, removing the ...

htmlcssnode.jspostmanemail-client

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

Changing colors when hovering over different elements

I am struggling to create a hover color change effect that applies to all elements (icon, text, and button) from top to bottom. Currently, the hover effect only changes the color of either the text and icon or the button individually. Below is the code sn ...

htmlcsshover

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...

htmlcssflexbox

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

phpcssvariables

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

javascripthtmlcss

Tips for styling a datatable scrollbar with CSS

My preference is to utilize the datatable API when creating tables. $('#datatable-example').dataTable({ "scrollX": true, "info" : false, "fnDrawCallback" : function(oSettings) { $('td').removeClass('sor ...

jquerycssdatatable