In what way do Tumblr and Google+ creatively arrange images like a jigsaw puzzle?

I'm interested in creating a unique gallery of images and I'm curious about how to stack them similar to Google and Tumblr.

What I mean is, on an archive page of Tumblr, the images are stacked in columns like this:

However, I also want the images to overlap across columns, similar to a Tumblr theme called Tessellate:

Here's an example of what I'm looking for - keep scrolling to see sections where an image or embedded video spans across 2 columns: (sorry I couldn't find a better example)

Google has a similar layout on Google+ photo pages:

Does this type of design have a specific name? How can I achieve it or where can I look to get these results?

It's almost as if the images are floating on top of each other.

Answer №1

It seems that Tumbler relies on Javascript to dynamically calculate the image layout by assigning absolute positions after the page load. If you adjust the window size, each image's position is re-evaluated.

In contrast, Google has opted to pre-arrange the images so they neatly fit together using float: left. The images are arranged in rows, except for the first one, and will adjust their size when the browser is resized to maintain the layout.

If you want to achieve similar image layout functionality, consider exploring the jQuery Masonry plugin.

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

Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...

Verify the password on a form by comparing it with the encrypted password stored in the database using the SHA-

My goal is to validate a password in a form against an encrypted password stored in a database using SHA-512 hashing. This validation process is specifically for a change password form. I am able to validate passwords when they are not encrypted, but I ha ...

Struggling to integrate buttons into an h2 element with the use of createElement() and appendChild() in HTML/CSS/JS

As I work on developing a website, one of the features I've been implementing is the ability for users to add books to a list and then review or delete them. The process was smooth sailing until I reached the point of adding buttons for these actions. ...

Encountering "Access Denied" error with jQuery Ajax on Windows Phone 7/IE9

Struggling to use this code with jQuery on Windows Phone 7.5, encountering an "Access is Denied" issue every time I attempt an ajax request for XML. JSONP isn't a viable solution as the necessary data only exists in XML. Looking for guidance on how to ...

JavaScript nested arrays not functioning with .map()

I've encountered a problem while using the .map function in JavaScript to extract a nested array from an API response. Here is the JSON: [ { "id": 3787, "title": "Dummy title!", "start_time": "2020-04-25T16:54:00.000Z", ...

Designing HR components using Bootstrap and CSS

Trying to integrate Bootstrap into my portfolio website, but struggling with styling the hr elements. They keep coming out like this: https://i.sstatic.net/IApoi.png They also refuse to center align, always sticking to the left. No idea why this is happe ...

AngularJS: Using $watch to retrieve the index of the modified item within an array

My current situation involves an array containing multiple objects. $scope.userCompetences = []; To monitor any changes in this array, I have implemented a deep watch: $scope.$watch('userCompetences', function (newVal, oldValue) { ...

Animating text with a shake effect using JQuery

I am attempting to create a shake effect on my text input field when validation fails. While I have achieved the shake effect, I am unsure how to customize the default values for direction, distance, and times. Additionally, I believe there is an error i ...

What causes my paragraph textContent to vanish after briefly displaying its value?

As a beginner in JavaScript and HTML, I am taking on the challenge of learning these languages from scratch independently. I have encountered an issue with my code where the word "Hi!" briefly flashes below the "Click Me!" button before disappearing compl ...

Utilize Google API V3 to create a dropdown selection list of locations, extracting latitude and longitude values from a JSON text file

I am working on creating a map using Google Maps API v3. I have implemented a dropdown select list for different places and I am pulling the latitude and longitude values from it. Initially, I manually added the options like this: <option value= ...

The action does not execute when the form is submitted

I’m currently working on a simple registration form, but I’ve encountered an issue with my code. Despite troubleshooting, I can’t seem to identify any errors in my code. Upon submission of the form, the page fails to redirect to register.php. Below ...

Arranging multiple lines of text above several images using CSS

I'm encountering issues when trying to place multiple texts in front of multiple images. I've managed to achieve this using absolute and relative positioning, with one text above one image. However, the problem arises when I try to apply this to ...

The step-by-step guide on passing arguments and fetching results from Angular UI Bootstrap Modal through Components

I am facing a simple scenario where I have defined a modal as a component and opened that modal using `uiModal.open`. However, when I try to pass custom data to the modal using "resolve" in the open method and arguments in the controller constructor, the d ...

Trigger a JQuery popup by toggling a class with a button

Hey there! I have a modal popup that utilizes an active class. When this class is present, the modal appears, and when it is removed, the modal disappears. I am trying to create a button that, when pressed, will show the modal, and a close button inside th ...

Creating a gap between two elements without using the space-between property

Currently working on creating a responsive menu, <div style={{ display: "flex", flexFlow: "row wrap" }}> {/* left side */} <div key="1">nav 1</div> <div key="2">n ...

What is the best way to display a URL field from mySQL as a clickable link in an HTML table?

My MySQL database is connected to a table. One of the fields in the table contains a URL. The URL is displayed correctly in the table but is not clickable as a link. Is there a way to make the URL appear as a clickable link? The field in question is nam ...

What is causing this JavaScript alert to malfunction?

My current project involves working with ASP.NET and in the view, I have a code snippet that is causing some issues. When I attempt to use Sweet Alert outside of the function, it works perfectly fine. Similarly, if I switch out Sweet Alert for a regular al ...

Looping through JQuery change events

I have a challenge with handling checkboxes. Whenever a user checks one, I need to validate if they are permitted to do so. If not, I must notify them and uncheck the box. However, this process becomes recursive as it triggers the change event again! How c ...

Design Pattern of AngularJS/Bootstrap Application

Seeking guidance on structuring a small AngularJS application for a simple stock charts app. As a seasoned developer but new to AngularJS, I am looking for the best approach. App Overview The app includes a left-hand "nav" bar for adding and selecting s ...

Creating a personalized button in DraftJs for inserting customized HTML with CSS styles

When utilizing DraftJs with WYSWYG, my task involves creating a custom button in the toolbar. Upon clicking this button, I intend to insert custom HTML (containing <button>) directly into the content. While I am familiar with adding a custom button ...