Masonry is limited to displaying a single column at a time

Struggling to make masonry work for the first time, as it is only displaying as a single column. Being more of a designer than a developer, it's possible that I'm overlooking something. Here is the code snippet I'm using:

    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
<div id="container">
    <div class="masonryImage">
        <img src="img/masonry_001.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_002.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_003.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_004.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_001.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_002.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_003.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_004.jpg">
    </div>
     
</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/masonry.pkgd.min.js"></script>

        <script>
  $(function(){

    var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  itemSelector: 'masonryImage'
});
  });
</script>

    </body>

And here is the CSS style:

#container {
    width: 1200px;
    margin: 0 auto;
}

.masonryImage { width: 25%; }

Answer №1

I experimented with the JSFiddle to achieve what I believe is the desired outcome:

http://jsfiddle.net/88tYe/5/

I configured the divs to have a percentage-based width, and allowed the images inside the div to occupy 100% of the available space (since you did not specify if you wanted a gutter, I omitted it).

The code is straightforward:

var $container = $('#container');
// initialize
$container.masonry({
   itemSelector: '.masonryImage'
});

Here is the corresponding CSS:

#container { width:1200px }
.masonryImage { width: 25%; }
.masonryImage img { width:100%; }

Answer №2

By including the jQuery library, you have the opportunity to utilize a jQuery solution.

itemSelector: 'masonryImage'

Remember, the line masonryImage should have a dot before it to make it .masonryImage

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.masonryImage'
});

http://jsfiddle.net/AdamAzad/88tYe/

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

Using jQuery on the client-side to interact with a MongoDB database

Currently, I'm in the process of developing a basic example application to gain experience with using MongoDB. My goal is to create a single web page that can interact with a local MongoDB server by adding and removing content dynamically through jQue ...

Ways to verify a correct email address using ReactJS

I'm currently working on a project using React.js and Next.js. I'm encountering an issue with handling the Axios response in Next.js as it's displaying "[object Object]" instead of the actual response data. How can I properly handle the resp ...

One PHP variable that can hold two distinct values

I've been working on a basic website using a local apache webserver with CGI to run my Python scripts. In addition, I'm incorporating jQuery for AJAX requests to the Python scripts to make it asynchronous. PHP comes into play for a login button t ...

Tips for resolving CSS issues in a vast style sheet

I'm currently facing a challenge with modifying the CSS of a Wordpress plugin I need to utilize. The learnpress.css stylesheet is very extensive, spanning over 2000 lines, making it quite complex to comprehend. All I am trying to achieve is a simple t ...

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

Build a basic website featuring a left-side menu and content on the right side

I intend to design a straightforward website featuring: A left menu with clickable items Clicking on each item will change the right menu to display new content consisting of a title, picture 1, text description, and picture 2. This format will be consis ...

Semantic UI allows for both left and right action input functionalities to be utilized

Is there a way to add actions on both ends of an input field? Here's what I've tried so far: <form class="ui form"> <div class="ui left action input"> <select class="ui compact selection dropdown" name="seats"> ...

Designing a Custom Wordpress Extension and Integrating External Scripts

As I dive into the world of WordPress plugin development, I'm seeking guidance from the codex to enhance my skills. Currently, I have a basic plugin that loads a javascript file from a CDN and is supposed to display tooltips. However, I'm facing ...

Tips for transferring data from the Item of a repeater to a JavaScript file through a Button click event for use in Ajax operations

I am working with a repeater that displays data from my repository: <div class="container" id="TourDetail"> <asp:Repeater ID="RptTourDetail" runat="server" DataSourceID="ODSTTitle" ItemType="Tour" EnableViewState="false" OnItemDataBound="Rp ...

Utilizing the child element's attribute value in a list to dynamically modify the CSS styling of a div element

I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars bas ...

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...

use javascript or jquery to conceal the textbox control

Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...

Is there a way for me to make my image source dynamically switch between 3-4 different images when hovered over?

I'm in the midst of a college project where I'm designing a clothing website. What I'm aiming for is to have the product image on the main feed change between 3-4 images of the same product with a quick transition when a user hovers over it. ...

Identifying the selected element with jQuery

Let's say I have a form that includes both inputs and textareas. How can I determine which one is currently selected or clicked on? $('body').on('change', 'input textarea', function() { }) In simpler terms, ...

Sending data from PHP to JavaScript using AJAX

I'm encountering an issue trying to pass data from a PHP file to a JavaScript file using echo. My PHP file contains the following code snippet: <?php ...establishing connection and retrieving list from database... for($i=0;$i<sizeOf($li ...

Creating an AJAX request in PHP to send data from multiple input fields with the same name

My goal is to create a poll system similar to Facebook for my project, but I am facing a challenge. I have implemented the following JavaScript code to add answers to inputs: $("body").on("click",".createnew", function(){ $(".inputsl").append("<d ...

What is the best way to display the print using AJAX and jQuery?

Currently, I'm diving into the world of AJAX and jQuery. At the moment, when I execute this PHP script on its own, I have to sit back and wait while the loading wheel spins until the loop finishes. while ( $row = mysql_fetch_array($res) ) { postc ...

I desire to share the JSON information and receive the corresponding response data

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> ...

JQuery Modal Popup Firefox flashing issue

This problem is quite unusual and challenging to explain. The issue I am encountering is related to a div containing a dropdown (select list) that displays the hours of a day (0-23). This div is shown in a JQuery modal dialog using the standard jquery met ...

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...