Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want.

Javascript:`

var container = document.querySelector('#container');
var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item'});

`

CSS: `

html, body, div, img {padding:0; margin:0; border:0;}
.container {width:100%;}
.item {width:19.5%;display:inline-block; margin-right:-3px;}
.item img{width:100%; vertical-align:top;}

`

HTML: `

<div class="container">
<div class="item">
 <img src="http://placehold.it/350x150">
</div>
... (more HTML code)
</div>

` The current output looks like this:

However, I am aiming for a layout similar to the image below.

Answer №1

If you're looking to solve your problem, consider using the Wookmark jQuery plugin. It also offers support for responsive viewing. Check out the Wookmark jQuery plugin here

Answer №2

For those who have the flexibility to utilize Javascript alongside CSS, I highly recommend giving the Masonry plugin a shot. In my experience, it has proven to be very effective.

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

Determine whether the server request originated from an Ionic mobile application

Currently, we are in the final stages of completing an Ionic project with a PHP backend. To enhance the security of our backend and protect it from external influences, we aim to restrict access to the backend only from within the Ionic project (native app ...

Adjust the alignment of text to a precise vertical ratio of the image

Let's say I have this amazing logo with some artistic text in it that cannot be replicated using a downloaded WebFont In the image, the text baseline sits at 68% from the top and 32% from the bottom. Now I want to align text in an HTML document, whi ...

What techniques can be employed to create a fully operational web application using AngularJS?

I have taken on the challenge of understanding AngularJS by creating a webapp. Within my Eclipse environment, I am working with 4 files: main.js, index.html, view1.js, and view2.html. Currently, I can get index.html to load when Tomcat is running. Embedd ...

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Hey there, I'm encountering an issue with the countdown component on my Next.js website using daisyUI. When the number of days exceeds 99, it's not rendering correctly as shown below: Initially, I have a straightforward countdown setup: const t ...

Using the combined power of CSS and jQuery to create dynamic visual effects based

Having some trouble figuring out why this code isn't functioning as expected... I've got a bunch of DIVs that have the class .rightColumnButton. Some of them currently have a height set to 30px: .rightColumnButton{ height:30px; width:206px; mar ...

React not displaying images with relative paths

In the past, I used to import images in React like this: import person from '../images/image1.png' And then use them in my code like this: <img src={person} alt="" /> Now, for some reason, I want to directly specify the image pa ...

Unexpected blank space detected at the bottom of the page in Angular 13

Using the NGX-ADMIN template built on Angular 12 has been smooth sailing until an upgrade to Angular 13. With this simple version change, I am now faced with a perplexing issue that I can't seem to pinpoint or resolve. I can confidently say that shif ...

Focusing solely on a particular category in EJS

I am struggling with this code snippet. HTML: <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>> <div cl ...

Is it possible to use PHP to add a prefix to every selector in a snippet of CSS code?

Suppose I have a variable named $css that holds some CSS code. My goal is to prepend a specific text to each selector. For instance, consider the following CSS code: #hello, .class{width:1px;height:1px;background-color:#AAA;} div{font-size:1px} input, a, ...

basic php websocket demonstration

Seeking help for implementing websocket functionality. I have been working on a websocket example, but it seems to be encountering some issues that I can't identify. Any assistance would be greatly appreciated. Thank you in advance. Here are the ex ...

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

I'm working with Laravel and trying to display data from a query in an HTML table. The table contains columns such as id, user, and shift. There are around 100 entries, with the shift column containing values like A, B, C, or D. My goal is to organize ...

Unique CSS styling technique

Is there a way to design a unique form similar to the one shown below using CSS? ...

The autocomplete feature in Google Maps is not functioning properly when used within a modal

I've integrated the Google Maps API to enable autocomplete address functionality for an input box on my page. However, I'm encountering an issue where everything works fine on the page itself, but it doesn't work when the input box is placed ...

Smoothly scroll to the bottom of a dynamically updated div using native JavaScript

I am in the process of developing a chat application and my goal is to achieve a smooth scrolling animation that automatically moves the page down to the bottom of the div when dynamic messages are loaded. <ul id="messages"> <li ...

Using JQuery to reverse the action of hiding an image

Having some trouble with my Javascript and JQuery skills, so bear with me. I've set up a gallery of images where users can drag and drop them into a designated drop zone. Everything works fine when dragging an image from the gallery to the drop zone a ...

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

Position the Bootstrap 5 navbar at the top of the page and set it

Is there a way to use the fixed-top class on a navbar without making it full width and overlapping the container? This is the code: <div class="container" style="border: 1px solid;"> <nav class="navbar fixed-top n ...

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

The elements of the second flex item should also be arranged in a line next to each other

<script src="https://use.fontawesome.com/2a2c577e07.js"></script> <div class="parent-flex"> <div class="class1">Class 1</div> <div class="class2"> <img src="http://farm4.static.flickr.com/3140/3506456511_43787 ...