Using JavaScript to dynamically render a variable amount of tiles

Let's say you have between 4 and 6 images or tiles that you need to display on a webpage. Depending on the specific number of tiles, different formatting is required. For example, if you have five images, they need to be arranged in two rows with two images in the first row and three images in the second row. Here is an illustration for reference: http://prntscr.com/9y75dw

If you are facing this situation and need assistance with determining the logic for arranging the images correctly based on the quantity, feel free to ask for help!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It appears that I might be overlooking a technique to approach this problem more effectively, especially considering the brief description and arbitrary number of images provided.

let numOfImages = $('img').length;
let newCount = 0, diffCount = 0;

if (numOfImages % 2 == 0) {
  // Handle even number scenario
  // Implement your desired action such as $('img').css('width', '50%');
} else {
  // Handle odd number scenario 
  newCount = Math.round(numOfImages / 2);  // Splitting the count into two parts
  diffCount = numOfImages - newCount; // Calculating the difference to place smaller images above and larger ones below
  $('parent-div img:nth-child(1)').nextUntil('img:nth-child('+diffCount+')').wrapAll('<div></div>') // Wrapping them in a container div
}

This is just one possible solution. By now, you may have already grasped various approaches to tackle this issue.

PS: The code was written randomly for illustrative purposes only. Its effectiveness is not guaranteed.

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

Having trouble accessing the information stored in the Firebase Database?

As a newcomer to Firebase and JS, I am attempting to showcase user information on a webpage that is stored within the Firebase database. The data format resembles the image linked here I have written this Javascript code based on various tutorials. Howev ...

javascripthtmlfirebasefirebase-realtime-databasefirebase-authentication

Implement a feature in Vue.js where clicking a button changes the background color

I'm working on an app using VUE JS and incorporating various components. Within one of the components, I have a button that I want to change color when clicked. This button is responsible for selecting different items from a table, so I'd like i ...

javascriptvue.jsbuttonvue-componentbackground-color

What should be placed in the viewRef: MapViewNativeComponentType parameter when utilizing React Native Maps in the current.fitToSuppliedMarkers function?

useEffect(() => { if(!origin || !destination) return; mapRef.current.fitToSuppliedMarkers(["origin", "destination"], { edgePadding: { top: 50, right: 50, bottom: 50, left: 50} }) }, [origin, destination]); I'm currently in t ...

javascriptreactjsreact-nativenativemapview

PHP Content File for Dynamic Ajax Website

I recently came across a very informative article that discussed how to create crawlable and link-friendly AJAX websites using pushState. The author provided detailed instructions on the process, but left out a crucial detail - how to store data in a PHP f ...

phpjqueryhtmlajax

Guide to iterating over user instances in Django

How can I display all of the user's items instead of just one? my_items.html is where I want to showcase them. {% extends 'base.html' %} {% block content%} <main role="main"> <div class="container> <!-- Exa ...

pythonhtmldjango

JavaScript: a function being exported fails to return either true or false

In a separate file, there is a function that checks for the existence of an admin in the database. If no admin is found, it creates one. The function should return true if an admin is present by the end, and false if not. /*AdminUser.js*/ const Admin = re ...

javascriptexpress

I am experiencing issues with the indentation not working properly in Bootstrap 5 within my Angular 15 project

While working on my project, I have encountered a problem where I am unable to apply Bootstrap's paddings and margins to my inner elements. Despite following all the necessary syntax and nesting rules, I am facing issues. Here is a snippet of the mark ...

htmlbootstrap-5angular15

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...

javascripthtmlvue.jshtml-tablevuetify.js

An issue with jQuery and LESS causing stylesheets to update only once

Struggling with updating a custom CSS href - everything works perfectly the first time, but subsequent updates do not reflect any changes on the page. Even though I can see the href updating in Chrome debugger and there are no errors being thrown by LESS, ...

jquerycssstylesheetlessasp.net-mvc-4

`Error encountered when attempting to use the if else route on ajax data`

Within the given JavaScript code snippet, the like_add function is following the else route instead of the expected if route, even though it receives a success response. I am curious as to why this is happening. The data returns success, but instead of m ...

phpjavascriptjqueryajax

Error: Function has not been properly defined

I need help creating a dynamic rotating DIV that changes automatically. I've implemented a switchRotator(id) function using JQuery to update the content of the DIV. However, I'm encountering an error with this function: function launchTimedRotat ...

javascriptrecursion

The jQuery autocomplete feature presents all choices regardless of what is typed into the input field

I'm currently working on a jQuery script that retrieves a JSON response and creates individual "player" objects based on the data received. These player objects are then added to the availablePlayers array, which serves as the data source for the aut ...

javascriptjqueryjsonautocomplete

Hey there! I'm experiencing an issue with the jquery function $(this).childen().val()

Here is my HTML and JS/jQuery code: (function($) { $('.list-group li').click(function(){ console.log("push li"); console.log($(this).attr('class')); console.log($(this).children('.hidden_input&ap ...

javascripthtmljquery

Delivering numerous sets of data within a JSON ajax response

If I needed to make a single request but receive multiple sets of responses, how would I go about separating them for parsing in jQuery and finding the length of each group? First Set (A) [ {"name":"Alice","surname":"Smith","message":"Greetings"} , ...

jqueryajaxjson

Trouble encountered with my onClick getJSON Function

I am in the process of developing a section in my app that will handle fetching JSON data, which will eventually be added to a ListView. For now, I simply want the JSON PHP file to be displayed when the Json button is clicked. Here is the error message I ...

phpandroidjqueryjson

What is the best way to manage multiple form submissions on a single page using Ajax and PHP?

I am currently working on creating an admin panel with two forms on the same page, both being handled using Ajax and PHP. Although I have written the necessary code, I am facing an issue where the data is not getting saved in the database. Data_entry.php ...

phpjqueryajaxforms

What is the best way to send selected checkboxes from a form to a PHP page in the form of an array using a jQuery submit feature?

Currently, I am working on a project that involves a list of checkboxes for user selection. The checkboxes are dynamically generated from a mySQL query, allowing users to select multiple options. Here is the code snippet for generating the checkboxes: ech ...

phpjquerymysqlformscheckboxlist

Creating a user-friendly login feature within the navigation bar of an HTML webpage

As someone who is new to CSS, I am currently working on a welcome page that includes a login section in the navbar. While I have successfully created div sections for the entire page, I am seeking assistance with coding the navbar using CSS. The current C ...

htmlcss

Extract the complete HTML information from the weather website

Currently, I am attempting to retrieve weather data from the following website: using this code snippet: try { int i = 0; if (googlefirst3.startsWith("http")) { Document document = Jsoup.connect("https ...

javascriptandroidweb-scrapingjsoup

Center content within a div using the middle alignment

Here's a question that goes beyond your typical "vertical align center" query. What I want to accomplish is to take a div with an unspecified height and position it at a specific percentage down the page, let's say 33%. I have managed to get this ...

htmlcss