"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

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

When working with ng-repeat in Angular 1 to display the index, this code is used: <div ng-repeat="car in cars"> <ul> <li>Index: {{$index+1}}</li> <li>Car Name:{{car.name}}</li> </ul> </div> However, w ...

javascriptangularloopsngfor

Creating a unique Voronoi Diagram wrap

I am currently working on the creation of a fantasy-style map that is procedurally generated using the cells of a Voronoi diagram to determine different terrains. While working on the tectonic plate generation, I came to the realization that having wrappi ...

javascriptactionscript-3voronoiprocedural-generation

A guide to retrieving data in React with useSWR whenever the state changes

In a specific scenario, I need to be able to choose users from a dropdown menu. Once a user is selected, the app should display that user's data. Upon loading the page, the app fetches the data for the first user in the array allUsers?.[0]: const [us ...

javascriptreactjsnext.jsswr

What are the best methods for ensuring a website maintains consistent visibility across all different screen sizes?

Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...

javascripthtmlcssfrontendweb-deployment

Submitting a page with PHP, Ajax, and JSON

Need help with making an Employee search functionality in my business using Ajax. After submitting the form, I want to load employee details using jQuery-based Ajax. Here is the code for searching employees. The problem I'm facing is that after submi ...

phpjqueryajax

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...

javascripthtmldom

The Context API leaves me feeling lost and confused

I am currently utilizing Auth0 for user sign up. My goal is to extract the user id listed under sub:value, and then add it to my database to associate it with a user's post. To achieve this, I am attempting to utilize a Context API to retrieve the use ...

javascriptreactjs

choosing between different options within Angular reactive forms

I am attempting to create a select element with one option for each item in my classes array. Here is the TypeScript file: @Component({ selector: 'app-create-deck', templateUrl: './create-deck.component.html', styleUrls: [' ...

javascripthtmlangulartypescript

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...

htmlangulartypescriptparent-child

Endless jasmine timeout

This question is a continuation of a discussion on the Remove timeout for single jasmine spec GitHub issue. Query: Can a single test be configured to never time out? The Issue: While it's possible to set a global timeout value using DEFAULT_TIMEOU ...

javascripttestingjasmineprotractor

What is the reason for the absence of a shorthand property in CSS that combines width and height measurements?

Have you ever thought about using a shorter property for specifying an item's width and height in CSS? Currently, we have to write: selector {width: 100px; height: 250px;} While this is already pretty fast, wouldn't it be even quicker if we c ...

cssheightwidthshorthand

Exporting table data from Bootstrap 3 DataTable to Excel is not functioning as expected

I am attempting to export the data from a table to MS Excel by referring to this example: https://datatables.net/extensions/buttons/examples/styling/bootstrap.html While the content displays correctly on the page, the issue arises when I try to export it. ...

javahtmlajaxtwitter-bootstrap

Unable to modify src using .attr() on an ng-repeat and ng-click combination is not functioning as expected

I have a collection of pictures (pins) displayed using ng-repeat. One of the requirements is that when a colored pin is clicked, it should turn grey, and vice versa. Here's how my ng-repeat is set up: ng-repeat="note in vm.myData.contactHistoryConta ...

jqueryangularjs

The functionality of removing a class on the body element is ineffective when using pagepiling.js

After creating a website using pagepiling.js, I implemented a script that adds the 'active' class to the section currently in view. My goal was to add a specific class to the body when my section1 is considered active. Here's the initial app ...

javascriptjquerypagepiling.js

Obtain the result of two "Synchronous" nested queries using Express and Mongoose

I need to fetch an array of elements structured like this: ApiResponse = [ {_id: 1, name: Mike, transactions: 5}, {_id: 2, name: Jhon, Transactions: 10} ] The user data is retrieved from a query on the "Users" schema, while the tr ...

javascriptarraysexpressmongoose

wiping out a column in Excel spreadsheets with the help of Node.js or its corresponding node modules

I've attempted various approaches without success. Can you provide guidance on deleting and adding columns within an Excel sheet using Node.js? ...

javascriptnode.jsexcelnpm

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

What is the best way to generate a div with a dynamically changing variable as its ID?

Creating a quiz where the user can choose how many questions to answer. A function is used to generate individual question divs based on the user's input. Each question displays a Chinese character, and the user must select the correct translation. ...

javascriptjquery

JQuery form plugin experiencing issues with Ajax functionality

I am facing an issue with implementing the Jquery form plugin using ajax to insert my form data into the database. Although the validation is working correctly, the ajax call is not receiving any data in response. It seems like I might not be following the ...

javascriptphpjqueryajaxjquery-plugins

Utilizing an undefined constant in angular programming may lead to unexpected errors

Seeking assistance in generating random first and last names based on gender for a form using Angular. I am relatively new to Angular and keep encountering this error whenever the Use of undefined constant firstName - assumed 'firstName' Here ...

javascriptajaxangularjslaravellaravel-blade