Creating a Masonry Gallery without any spacing between images

I'm looking to create a unique masonry gallery design that eliminates any gaps between images. I've experimented with various plugins like masonry and isotope, but they still leave gaps in the layout. Packery seems promising, however it tends to result in staggered images at the bottom of the gallery.

For instance,

My goal is to have a grid of images, all different sizes, within a square layout measuring 1000x1000. The challenge lies in ensuring that these diverse-sized images seamlessly fit together without any space between them.

If anyone has insight or experience in achieving this specific design objective, I would greatly appreciate your advice!

jquerycssjquery-isotopemasonrypackery

Answer №1

To ensure a seamless display with $.masonry(), it is important to adjust your CSS to eliminate gaps between elements. Make sure your image widths are consistent to allow for flush alignment, and avoid setting a gutter or width in the masonry configuration that could create unnecessary space.

$('.masonry').masonry();
img {
  max-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
  <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  <img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
  <img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg">
  <img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg">
  <img src="http://www.w3schools.com/w3css/img_forest.jpg">
</div>

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

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree ...

cssangulartreeangular-material

Delivering styled coldfusion outcomes utilising css and jquery

After using jquery to retrieve some data, I've noticed that the results are displayed correctly but the CSS is not being applied. Is there a way to style the results with CSS? function doSearch() { //Making an AJAX call to the server $.ajax({ / ...

jquerycsscoldfusion

The fixed position seems to be malfunctioning and behaving more like absolute

I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like ...

css

Creating an Angular application within the success callback of a jQuery Ajax request

Using a jQuery ajax request, the HTML of one of several independent angular apps is loaded and injected into the DOM. Here is a simplified version of the code: $.ajax({ 'url': 'url-to-random-angular-app.html', 'success': ...

jqueryangularjsajax

Server connectivity issues due to air disruptions

Our team has developed an innovative Air application for delivering course material to our clients. However, we have encountered a connectivity issue with some clients that we were able to replicate. To provide some context, the application utilizes jQuer ...

jqueryajaxtimeoutairconnectivity

"jQuery enables hover effects to be applied to elements that are not directly related

I'm attempting to achieve an effect where an element will show or hide when I hover over a completely different element. Currently, my approach involves using lists and indexes so that the nth item in list 2 changes when the nth item in list 1 is hov ...

jqueryhtmlcsshover

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

Utilizing LessCss for color transparency and variable declarations with @vars

I'm attempting to create a function using LessCss, but I am encountering an issue: .transparent-border (@alpha:.15, @color:'0,0,0', @type: solid, @size:1px) { @val: @size @type rgba(@color, @alpha); border: @val; } The problem er ...

csssyntax-errorless

Adjust the size of an array based on the specified index

I have an array defined as... let myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] ...along with a starting index let start = 2 and an ending index let end = 5. I want to resize the array by taking elements from start to end, for example: start ...

javascriptjqueryarrayssortingindexing

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

"Enhance Your Design With CSS3 Styling for Labels and

HTML <div class="select"> <div> <label for="kitty" class="kitty-label kitty-label-1 l-center"> </label> <input type="checkbox" name="cats" value="1"> <label>Kitty One</label> ...

htmlcss

Steps for updating images and text on a live webpage after launching the web application

I added an image to a jsp file. The image, named kid.jpg, is downloaded and stored in the /resources/images folder as shown in the code snippet below. <li style="background-image: url('resources/images/kid.jpg');"> Now that my web app is ...

javajqueryhtmlimagejsp

"Sending data with jQuery by encoding an array in PHP and converting it

This question has been raised in various forms before. I am facing a challenge when it comes to transferring data from a JSON encoded array to another page on my domain. Below is the PHP code snippet: <?php $json_results = json_encode($results); ...

phpjqueryajax

The Mootools element with the Object #<HTMLDivElement> does not support the addEvent method

$$('.img-default > a')[0] Retrieves the correct element from the DOM, but I am unable to attach an event. This bit of code: $$('.img-default > a')[0].addEvent('click', function(){ //GA code }); produces the followin ...

javascriptjquery

Styling Angular Datatables with CSS

i have data on the front end https://i.stack.imgur.com/2xq7a.jpg i need all check marks to be displayed in green color. Below is the code snippet: $scope.dtColumnsCal= [ DTColumnBuilder.newColumn('name').withTitle('Name') ...

cssangularjsdatatables

Struggling to Interpret JSON Data

I am currently working on updating the content of a mobile version of a desktop site by using an Ajax call back to the desktop version. The mobile site is located on a separate subdomain, and I am retrieving page content from the desktop version in JSON fo ...

ajaxjquery

Checking for the winner in a JavaScript tic-tac-toe game

Here is the code snippet for a tic-tac-toe game: $(".square").one("click", function() { if( gameOver == false ) { sq1 = $("#sq1").text(); // captures the value of squares after being clicked. sq2 = $("#sq2").text(); //and so on for all 9 squares } / ...

javascriptjqueryfunctionvariables

Is it possible to forecast an on click event using jQuery?

I have encountered a specific issue. Within my code, there are certain elements, specifically <li> elements, that undergo a particular operation triggered by a click event: $('.panelTabs li').on('click', function () { // ..som ...

javascriptjqueryeventsonclickstoppropagation

struggling to find the precise value in the array

my original result is displayed below: [status] => 1 [schedule_status] => 1 [cid] =>3 [cdate] => 16-10-18 01:10:52 [did] => 16 [jid] => 4 However, when I try to extract individual array values using the following code: $count = count($ ...

phpjqueryhtmlajax

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

javascripthtmljquerycss