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

What are the steps to modify the text color in WKWebView?

I've customized my ViewController to include a WKWebView, where I load my content from both .html and .css files. The result resembles a controller for reading books within the Apple Books app. do { guard let filePath = Bundle.main.path(fo ...

htmlcssiosswiftwkwebview

Instead of using onload, activate function upon click instead

Upon page load, I have a function that executes: function loadData(page){ showLoading(); $.ajax({ type: "GET", url: "load_data.php", data: "page="+page, success: function(msg) { ...

javascriptjqueryajax

Each $.each function varies based on the type of object it is iterating

I have encountered an issue with my $.each statement. When it is written like this: $.each($(".permissions"), function (index, element) { ... }).promise().done(function () {...}); everything works fine. However, when I change the $.each statement to: ...

javascriptjqueryajax

Stop vuetify from cluttering the global style scope

Seeking to embed a Vue component into another from an external source without using a Vue Plugin. The components are mounting correctly, but the embedded component's use of Vuetify is affecting the parent application's style. Visual examples can ...

cssvue.jswebpackvuetify.js

Why does Javascript execute in this specific order?

I'm puzzled as to why JavaScript behaves in a certain way, or if I made an error in my code. How is it that the code after $.getJSON runs before the callback completes? window.ratingCallback = function(data){ if(data[0].code == 3){ ratin ...

javascriptjquery

Tips on Monitoring Load Time of Partial Views inside jQuery DialogWould you like to know how

I am using a partial view in my project and rendering it with jQuery dialog functionality. I am interested in measuring the render time of this partial view in minutes, seconds, and milliseconds. Can anyone provide guidance on how to accurately measure t ...

jqueryjquery-ui-dialogasp.net-mvc-partialview

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Having difficulty adjusting the StartIcon margin within the MUI Button example, unable to override its values

Currently, I am facing an issue with the Button component in Material UI. Specifically, I am working with a Button that contains a StartIcon. Despite trying to modify the default margin provided by the StartIcon CSS, I have been unsuccessful so far. https: ...

htmlcssreactjsmaterial-ui

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

What is the best method for eliminating script tags from a Magento web store's source code?

Below is the source code for the Magento site's homepage. I am looking to eliminate all JavaScript links from the code: ...

javascriptjquery

The WebView.HitTestResult method is currently only receiving <img src> elements and not <a href> elements

I am attempting to open a new window in the Android browser using "_blank". I have set up an event listener for this purpose. mWebView.getSettings().setSupportMultipleWindows(true); mWebView.setWebChromeClient(new WebChromeClient() { ...

javascriptandroidjqueryhtmlwebview

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

javascripthtmljquerydjangoajax

The hexadecimal code for the textured background color of an iOS Scroll View in CSS

Can someone share the specific CSS color code with me? I would like to apply this same color to my website. Appreciate it! ...

ioscssbackground-color

Unique text: "Personalized button design without using SVG

I've been experimenting with creating a button using SVG, but unfortunately, it seems that SVG is not supported on Next.js & Material UI. Below you'll find the code snippet and screenshot I have been working with. Any help or guidance would be g ...

htmlcssmaterial-uifrontendnext.js

Dragging objects on a map is done using jQuery and it causes them to bounce

Currently, I am working on implementing the JQuery Draggable feature. My idea is to create a map where I can attach image Divs to it dynamically using Jquery. So far, I have been successful in adding the Divs and making them draggable around the map effici ...

javascriptjqueryhtmldraggable

How to horizontally align a logo image in the appBar using Material-UI (ReactJS)

I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...

cssreactjsmaterial-ui

How come this isn't growing the way I had hoped for?

Currently, I am working on a small jQuery script that is designed to fetch and print a specific month from a PHP file. Here is my code snippet: var count = 0; $(".nextMonth").click( function(event) { event.preventDefault(); count++; $("#r ...

phpjavascriptjqueryajaxget

Continuously simulate mousewheel events

I'm trying to make my mousewheel event trigger every time I scroll up, but it's only firing once. Can you assist me with this issue? Please review the code snippet below. $('#foo').bind('mousewheel', function(e){ if(e.o ...

javascriptjqueryjquery-eventsmousewheel

Issues with special characters in @font-face rules

For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...

csscross-browserfont-face

Having trouble adding jQuery variable information through Ajax

When I click a certain button, I am attempting to insert a specific variable string "date" into my database. var date2 = curr_year + "-" + m_names[curr_month] + "-" + curr_date + "T" + curr_hour2 + ":" + curr_min + ":" + milli + " "; var date ...

jqueryajax