Automatically create CSS properties for left and top using absolute positioning

Question

Automatically create CSS properties for left and top using absolute positioning

When looking at these websites as models:

On each of them, I noticed that there is a well-organized column of boxes for every post. I attempted to recreate this using various methods, but couldn't achieve the exact layout on my own website.

It seems like they position each box column by setting the CSS left and top properties with automatic values and utilizing absolute positioning for each box. Is there a JavaScript/jQuery example similar to what they use in order to automatically adjust the CSS left and top values?

javascript jquery html css

Answer 1

Answer №1

Don't waste time trying to create something that already exists.

The perfect solution for you is the Masonry plugin.

Answer 2

Don't waste time trying to create something that already exists.

The perfect solution for you is the Masonry plugin.

Answer 3

Answer №2

Here's a simple script for creating columns:


let i = 0;
const columnWidth = 300;

$('.box').each(function() {
    i++;
    
    if (i > 4) {
        i = 1;
    }
    
    $(this).addClass('column-' + i);
    $(this).css('left', (i - 1) * columnWidth + 'px');

    let columnHeight = 0;
    
    $('.column-' + i).each(function() {
        columnHeight += parseInt($(this).css('height'));
    });

    $(this).css('height', columnHeight + 'px');
});

Note:

This code may need some adjustments as it was created quickly before leaving the office. It provides a starting point for achieving the desired effect.

Answer 4

Here's a simple script for creating columns:


let i = 0;
const columnWidth = 300;

$('.box').each(function() {
    i++;
    
    if (i > 4) {
        i = 1;
    }
    
    $(this).addClass('column-' + i);
    $(this).css('left', (i - 1) * columnWidth + 'px');

    let columnHeight = 0;
    
    $('.column-' + i).each(function() {
        columnHeight += parseInt($(this).css('height'));
    });

    $(this).css('height', columnHeight + 'px');
});

Note:

This code may need some adjustments as it was created quickly before leaving the office. It provides a starting point for achieving the desired effect.

Answer 5

Answer №3

It appears that the tool being utilized is called jQuery Isotope. Hopefully, this information was useful.

Answer 6

It appears that the tool being utilized is called jQuery Isotope. Hopefully, this information was useful.

Automatically create CSS properties for left and top using absolute positioning

Answer №1

Answer №2

Answer №3

Similar questions

After a period of time since the server has been initialized, the function req.isAuthenticated() no

How can Typescript help enhance the readability of optional React prop types?

How to pass GetServerSideProps into Page component props in Next.js with custom _app.js

Implementing specifications throughout the entire nodejs route

Error: Unable to locate module '@material/core/Grid'

Show the table within the flex container

The Angular template driven forms are flagging as invalid despite the regExp being a match

I am currently dealing with an issue where 3 controllers are responsible for fetching data from a database and displaying it in a dropdown list. However, the problem arises when a value is selected from the list as it

In search of a JavaScript library that can help format strings to meet the requirements of JSON formatting

PHP enables users to look at manual values in columns and MySQL values row by row

Retrieving the value of a specific property nested within a JSON object using basic JavaScript

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Running JavaScript in Laravel without explicitly calling it

Check the status of the audio source URL using JavaScript

Refreshing a Vue JS component

Finding the element and extracting its text value

Getting the Value from a Promise into a Variable in a React Component

Vue.js: Incorporating a client-side restful router using vue-router and a state manager

Tips for inserting HTML into elements using Angular

Tips for maintaining selected text while a modal window is active