Steps to utilize jQuery Masonry Plugin for organizing images

Struggling to put together a straightforward image gallery that can accommodate images of different sizes, I stumbled upon masonry in my quest for a plugin that could help with that.

After attempting to create a prototype of this idea using a masonry empty box layout as a reference, I'm stuck on how to actually place the images in these boxes.

http://jsfiddle.net/zigzag/kz2b79s3/

Here is an example of how I structured one tile:

 <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>

As evident in the fiddle, the image is overflowing instead of fitting neatly within the box. I must have overlooked something simple here.

javascriptjquerycss

Answer №1

It seems that you just need to add a css class to adjust the image based on the size of its parent container

.item img {
  display: block;
  width: 100%
}

Check out the example below

$(function() {

  $('#container').masonry({
    itemSelector: '.item',
    columnWidth: 100
  });

});
body {
  font-family: sans-serif;
}

#container {
  border: 1px solid;
  padding: 5px;
}

.item {
  width: 60px;
  height: 60px;
  float: left;
  margin: 5px;
  background: #CCC;
}

.item.w2 {
  width: 130px;
}

.item.h2 {
  height: 130px;
}

.item img {
  display: block;
  width: 100%
}
<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 id="container">
  <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>
  <div class="item w2"></div>
  <div class="item"><img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"><img src="https://static.pexels.com/photos/356378/pexels-photo-356378.jpeg"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"><img src="https://pixabay.com/photo-1210559/"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</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

modify the inherent CSS property

I am working with a component that I have inherited, including its CSS style, and I need to modify one of its properties. Current CSS: .captcha-main-image { width: 100%; height: auto; } <img class ="captcha-main-image" id="captchaImage" src= ...

htmlcssangular

Challenge Encountered with Create-React-App TypeScript Template: Generating JS Files Instead of TSX Files

Encountering a problem setting up a new React application with TypeScript using the Create-React-App template. Followed the guidelines on the official documentation (https://create-react-app.dev/docs/adding-typescript/) and ran the command below: npx creat ...

javascriptreactjstypescriptcreate-react-app

What is the best way to retrieve the class name of a div element that comes before with jquery?

I'm currently working on a new design and I need to retrieve the name of the class from a div element that is positioned above another div element. Here's an example: <div class="random name a"></div> <div class="the name of this ...

jqueryhtmlcss

What is the process for incorporating a custom button for selecting the date and closing the calendar in bootstrap-datepicker?

I successfully coded a simple project, but I'm struggling to figure out how to add a custom button to the bootstrap-datepicker. <!DOCTYPE html> <html> <head> <title>JS</title> <link rel="stylesheet" href="http ...

jquerybootstrap-datepicker

The pause button will still function, even if the scrolling feature is enabled

I've successfully implemented a feature that pauses and plays the video on scroll when it reaches a certain pixel height. However, I'm facing an issue where the code automatically plays the video whenever the scroll position is more than 13500px ...

javascriptjqueryhtmlcss

Chrome on IOS: Experiencing screen freezing while scrolling

1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...

javascripthtmlcssreactjsmaterial-ui

What is the best method to incorporate a Node.js package into a Java program?

In the process of enhancing a server built in Java, I stumbled upon an excellent Node.js package on npm that offers an API I wish to utilize from the Java server. What is the best approach for establishing a connection or bridge between these two technolo ...

javascriptjavanode.jsnpm

Node.js command-line interface for chat application

Can someone help me figure out the best method for creating a command line interface chat app using nodejs? I'm considering using http and possibly phantomjs to display it in the terminal, but I have a feeling there's a more efficient approach. A ...

javascriptnode.jshttpnpmserver

The div is lacking in height

I have 3 divs that belong to the stackContainer class: .stackContainer { position: relative; } Within these divs, I want multiple elements stacked on top of each other. To achieve this, I use the following code: .stackItem { position: absolute; ...

htmlcss

What are the best methods for testing REST API and Client-side MVC applications?

When dealing with a RESTful server that only responds with JSON data fetched from a database, and having a client-side application like Backbone, Ember or Angular, where should application testing take place? Is it necessary to have two sets of tests - on ...

javascriptnode.jstestingmocha.js

React.js Material UI Dropdown Component

Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...

htmlcssreactjsmaterial-ui

What is the process for using the fetch method in React to upload a file?

Currently, I am developing a react component that involves uploading an Excel file to a server. Although my approach seems correct, it returns an empty object when I check the request body in console. <input type="file" id="avatar" name="avatar" onChan ...

javascriptreactjsexpress

What causes Node.js to be unable to handle requests from Vue.js?

I'm encountering a strange error where Node.js is unable to see the URL address and consistently returns a 404 error. In my Vue.js application, I am making a post request using the axios package when the user clicks a button. The code snippet shows t ...

javascriptnode.jsexpressvue.js

Determine if the JSON lacks an array within it

Utilizing an API to fetch results, the response received looks something like the following: {"currentPage":1,"numberOfPages":1,"totalResults":1,"data":[{"id":"Sf8xxo","name":"The Bear Reader Huckleberry Oatmeal Stout","nameDisplay":"The Bear Reader Huckl ...

javascriptjsonparsing

Is there a way to keep my <nav> positioned in the top right corner of my header?

I'm in the process of setting up a fresh homepage and I've implemented the code below: menu { width: 100%; height: 60px; background: rgb(0, 0, 0); z-index: 2; position: fixed; } #content { margin: 0 auto; width: 1024px; height: ...

htmlcsswebnav

Converting ed25519 private key into OpenSSH Format using JavaScript

After generating an ed25519 key pair using the javascript crypto library, I am now faced with the challenge of saving the private key in openssh format. Despite attempting to use the sshpk library for this task, I encountered an issue where the exported k ...

javascriptexportopenssh

What is the best way to utilize JSONP to display an entire HTML code with an alert?

When I attempt to use cross-domain ajax to retrieve the entire HTML page code, I keep receiving a failed message. The console log shows: "Uncaught SyntaxError: Unexpected token <" Below is my AJAX function: function fetchData(){ var url = documen ...

javascriptphphtmlajaxjsp

Executing functions with directive controllers

Is there a simple way to call a function on a directive controller by accessing the instance using its id from the parent controller? <my-directive id="id1" /> var dirController = getDirectiveByID("id1"); dirController.someFunc(); If you have any ...

javascripthtmlangularjs

Tips for documenting curried functions using Js docs

I'm encountering issues while trying to use Js docs for generating static documentation of my project. When attempting to run the js doc command, I am faced with numerous parse errors specifically in areas where I have curried functions. Strangely, my ...

javascriptjsdoc

Using Jquery and AJAX to display results during the execution of a time-consuming operation in PHP

Good day. I am experiencing an issue with my code where, upon submission, data is sent to a PHP file that checks the health status of multiple network nodes. The problem I am facing is that it takes around 40 seconds for the tasks to complete and during t ...

phpjqueryajax