"Refine Your Grid with a Pinterest-Inspired

I've set up a grid of images in columns similar to Pinterest that I would like to filter. The images vary in height but all have the same width.

The issue arises when a taller image is followed by a shorter one, causing the short image to float right underneath the tall one and leaving an unsightly gap.

For instance, if you take a look at "Category 3" on this page: The last image ends up getting stuck below the smallest one, instead of aligning all the way to the left as desired.

I have experimented with using isotope, shuffle.js, mixitup, among others. However, these solutions are designed for grids with varying heights and widths, resulting in unwanted gaps.

javascriptjqueryhtmlcss

Answer №1

If you're experiencing layout issues, consider changing the layout mode to masonryHorizontal for a possible solution. Here's an example:

$container.isotope({
    filter: '*',
    layoutMode: 'masonryHorizontal',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

In some cases, customizing the unminified isotope js file may be necessary to achieve the desired effect. I've encountered similar challenges before, and sometimes this approach is needed.

Referencing the documentation on different layout modes can also provide insight into handling specific requirements for your site. While 'masonry' is typically recommended, exploring alternative options could help address any issues:

Another workaround involves tricking Isotope by adding empty divs with hidden visibility in the styles. This can create a placeholder that alters the positioning of elements. Keep in mind that this method may not be suitable for dynamic content like social media feeds.

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

Creating dynamic titles and cell contents using tr and td in PHP

I'm struggling with creating a dynamic table Here is the structure of my table: ====================================================================== tender_id | coc | datasheet | datecode | shelflife | Suppliername ================================ ...

phpjquery

Alias destructuring for arrays within nested objects

I'm currently attempting to change the names of certain objects from one array (eventFetch) and transfer them into another array (mapEvents). I initially tried using destructuring aliases for this task, but since I need to rename a nested object, it d ...

javascriptarraysreactjsecmascript-6

Dynamically create a button using jQuery and JSON based on specific conditions (either true or false)

Is there a way to generate buttons with specified parameters only if a condition is true? Currently, the buttons are generated without checking conditions. Any help with the correct syntax would be appreciated. Sample JSON code: { "Caption": "Module ...

jqueryhtmljsonbutton

Configuring Multer destination dynamically using FormData values in Node.js

I have a scenario where I need to send a file along with some data values using an XMLHttpRequest (xhr) to a Node.js server running Express. To handle multipart data, I am utilizing Multer as bodyParser does not work in this case. router.post("/submit", f ...

javascriptnode.jsexpressxmlhttprequestmulter

Having difficulty updating the border color of Material UI Input when it is in focused or unfocused state

I can't seem to figure out why this code isn't working as expected. I'm trying to target the MuiInputBase-root element, specify that it should have a blue border by default, and then change the border color to red when focused. Can someone h ...

javascriptreactjsmaterial-ui

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

htmlcss

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

What is the best way to add new input fields dynamically using the push() function in AngularJS?

I'm currently working on implementing an add more field feature in angularjs. Here is the code that I am using: Javascript <script> function FruitsController($scope){ var div = 'Apple'; $scope.fruits= ...

javascriptangularjs

Seeking particular section of online content in an asynchronous manner

Is there a method for asynchronously requesting a specific portion of a web resource (like the initial 100 bytes) using JavaScript? I believed this could be accomplished through XmlHttpRequest by adjusting its Range header. However, if the server utilizes ...

javascriptajaxhtmlhttpxmlhttprequest

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

We are currently using Docz to document our type definitions. While it works well for interfaces, we've run into an issue where rendering anything other than interfaces as props in Docz components doesn't seem to display properly. I'm seeki ...

javascripttypescripttypescript-typings

Step by step guide on showcasing live server information obtained from the user-end through AJAX technique in a Javascript Pie Chart, within an ASP.NET html template

I have successfully managed to transfer data from the Client Side (C# Back End) to Server Side (JavaScript HTML in aspx) using AJAX. I need help figuring out how to display my own data dynamically in a JavaScript Pie Chart instead of hardcoding values. He ...

javascriptc#htmlasp.netajax

Tips for invoking a JavaScript function within an iframe

I'm looking to add an iframe to my HTML document, but I also need to pass a variable from a JavaScript function that is located on the same page (which retrieves cookie values). <script type=text/JavaScript> var generateLinkerUrl = function(url ...

javascriptiframe

Interactions between JavaScript and PHP scripts within a web application

THE SCENARIO In the midst of creating a web application that dynamically loads content by fetching data from a MongoDB database where items and their respective authors are stored in separate collections within the same database. The author's ID is s ...

javascriptphpjqueryajaxmongodb

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

htmlcss

Failure to receive Ajax XML data in success callback

I am struggling to access the book.xml file that is located in the same folder as other files. Everything seems fine, but the ajax function refuses to enter the success state and instead shows an [object object] error message. The XML file is very simple, ...

javascriptjqueryhtmlajax

deleting the current product information during an ajax request

After executing the query provided below, I have $product_list in this code. However, I want to use ajax so that when I click on the button link1, $product_list gets emptied. How can I clear the content within products_list using an ajax call triggered by ...

javascriptjqueryajax

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

Is there a way to retrieve the value using the HTML tag ID after an HTML page has been rendered? For example, how can I access the date value using the td_date in my JavaScript function? Below is the code snippet that populates the data on the page: listS ...

phpjavascripthtmljson

Implementing a 10-second alert display in selenium

Task at Hand: I need to display the alert on my page for a few seconds to allow reading. Is there any function in Selenium Web-driver that can help with this? I am new to automation and have been learning about explicit waits. I tried using explicit wait ...

javascriptjavaseleniumselenium-webdriverautomated-tests

Supertest and Jest do not allow for sending JSON payloads between requests

Below is the test function I have written: describe("Test to Create a Problem", () => { describe("Create a problem with valid input data", () => { it("Should successfully create a problem", async () => { const ProblemData = { ...

javascripttypescriptexpressjestjssupertest

Organizing AngularJS controllers in separate files

I am facing a challenge with my cross-platform enterprise app that is built using Onsen UI and AngularJS. The app has been growing rapidly in size, making it confusing and difficult to manage. Until now, I have kept all the controllers in one app.js file a ...

javascriptangularjsnode.js