Building with bricks and mortar does not involve organizing visual content

I'm currently trying to organize some fairly large images using masonry, but the code below doesn't seem to be working. I'm using node.js with express and have installed the masonryjs package in an attempt to make it work, but that approach didn't yield any results. I then tried utilizing the cdn version with no success either.


    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>web</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- Styleheet -->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
      </head>
            
      <!-- masonry JS-->
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
      <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
             
      <script type="text/javascript">
        var elem = document.querySelector('.grid');
        var msnry = new Masonry( elem, {
          // options
          itemSelector: '.grid-item',
          columnWidth: 200
        });
      </script>
            
      <style>
        .grid-item { width:10% }
      </style>
              
      <body>
        <div class='grid'>
          <div class="grid-item"><img src="images/photo/cat1/c11.jpg" alt=""></div>
          <div class="grid-item"><img src="images/photo/cat1/c12.jpg" alt=""></div>
          <div class="grid-item"><img src="images/photo/cat1/c13.png" alt=""></div>
          <div class="grid-item"><img src="images/photo/cat1/c14.jpg" alt=""></div>
          <div class="grid-item"><img src="images/photo/cat1/c15.png" alt=""></div>
        </div>
      </body>
    </html>

Answer №1

Shift your script placement right before or modify the script to

$(function() {
    var elem = document.querySelector('.grid');
    var msnry = new Masonry( elem, {
        // options
        itemSelector: '.grid-item',
        columnWidth: 200
    });
});

It seems like you're executing the script before the document is fully loaded.

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

Refreshing the dropdown selection to a specific option using AngularJS and either JavaScript or jQuery

Currently, I am facing an issue with resetting the select tag to its first option. I have implemented Materialize CSS for styling purposes. Despite my efforts, the code snippet below is not achieving the desired outcome. Here is the JavaScript within an ...

What methods can be used to get npx to execute a JavaScript cli script on a Windows operating system

The Issue - While my npx scaffolding script runs smoothly on Linux, it encounters difficulties on Windows. I've noticed that many packages run flawlessly on Windows, but the difference in their operations remains elusive to me. Even after consulting A ...

What is the reason for index always being not equal to 0?

<script> var index = 0; $.getJSON("./data/data.json", function(json) { $.each(json, function(data) { var html = ""; if(index == 0) { console.log(index + " fir ...

Trouble updating values in Javascript objects

I'm having trouble understanding a problem I am experiencing. When I receive a Json object as a Websocket message from a hardware device, the property `uiAppMsg` is encoded in base64. After decoding it, I attempt to reassign it to the `uiAppMsg` prop ...

Error: The variable fullName has not been declared

To start off, I need to develop a registration form that includes fields for full name, email, password, mobile number, and date of birth. Once the email validation is successfully completed and the submit button is clicked, the user should be redirected t ...

Customize the background color in VueJS based on user roles

I am currently working on a vuejs project with different user levels. In the "user" level (and public area), there is a background image, while in the "admin" level, a plain white background is displayed. I have read that using style tags in the template ...

The Value Entered in Angular is Unsaved

I have encountered an issue with my app's table functionality. The user can enter information into an input field and save it, but upon refreshing the page, the field appears empty as if no data was entered. Can someone please review my code snippet b ...

Redirecting pages without a hash portion

In my Express.js app.js file, there is a get route that looks like this: app.get('/admin', function(req, res, next){ if(req.isAuthenticated()) { return next(); } res.redirect('/admin/login'); },Routes.Admin.Index); When a ...

Is the z-index useless when the button is positioned behind divs and other elements?

I would like the "Kontakt" button to appear in the top right corner of the page, always on top of everything else. I have tried setting the z-index to z-index: 99999999999 !important;, but it doesn't seem to be working... On desktop, the button displ ...

Browser Compatibility in Three.js

Could someone assist me with activating webgl on Internet Explorer version 8? I am able to use Firefox and Chrome without any issues. Your help would be greatly appreciated. ...

Tips for displaying and concealing columns in Blazor QuickGrid based on breakpoints

I encountered an issue when attempting to hide a PropertyColumn on small screens in Blazor 8 using the regular Bootstrap 5 method. By adding Class="d-sm-none d-md-block" to the QuickGrid component's PropertyColumn, it seems that the Bootstra ...

Typescript Server Problem: Critical Error - Mark-compacts Inefficiently Close to Heap Limit, Allocation Unsuccessful - JavaScript Heap Exhausted

Whenever I run my CRA project, I consistently encounter this error in my console. It seems to be related to the typescript server. Is there a solution for this issue? 99% done plugins webpack-hot-middlewarewebpack built preview 7c330f0bfd3e44c3a97b in 64 ...

getting a null response when using the map feature - coding battles

Given an array filled with integers, my goal is to generate a new array containing the averages of each integer and its following number. I attempted to achieve this using the map function. var arr = [1,2,3,4]; arr.map(function(a, b){ return (a + b / ...

What could be the reason for my CORS headers not aligning even though they appear to be identical?

I encountered an issue while using passport js with REACT. When trying to fetch the logged in user data, I faced a problem where the cors header of fetch didn't match even though they are identical. Here is the endpoint I am sending the fetch request ...

What is the best way to display all MongoDb records when there is no query specified?

Seeking advice on modifying an endpoint that currently fetches all courses from the database by default. I am looking to update it so that when req.query.class is empty, it retrieves all records, otherwise returns records conditionally. router.get('/a ...

Tips for ensuring consistent spacing between font icons within a navigation bar when using text with font icons as links

Below is the code I have implemented for a navigation bar: body { margin: 0; } .navbar { display: inline-block; background-color: #495057; width: 100%; } .navbar ul { list-style-type: none; text-align: center; float: left; } .navbar ul ...

Building a Full-Stack Application with React, Express, and Passport

I'm in the process of setting up a full-stack application that utilizes React and Express JS. For authentication, I have implemented Passport.js but encountered a minor issue... My front-end and back-end are running as separate packages on different ...

Utilizing the map() function to iterate through a list of outcomes and assigning the resulting array as the state of a component in ReactJS

Currently, I am facing an issue with assigning an array value to the state in my react project. In order to do this, I have initialized my state as follows: constructor(props) { super(props); this.state = { category: [] } } My objec ...

A guide on iterating through an array to extract the initial character from every string

Currently, my focus is on extracting the initial letter of each word in order to create an acronym. I have set up an array where all the capitalized words are stored, and now I need a way to extract those specific characters. To achieve this, I initially ...

Issues with Line Chart in D3: Scaling and Zoom not functioning as expected due to ClipPath limitations

I am utilizing D3 version 4 to process data and create a graph based on dates. Although I have successfully adjusted everything to be compatible with zoom functionality, I am struggling to prevent the line from extending beyond the chart axes. I would pre ...