The VueJS dynamic grid view

Currently, I am working on a project in VueJS using vue cli 3. I am facing an issue with implementing MasonryJS into my Vue project. The challenge lies in grasping how to integrate this masonry layout into my Vue application.

;
(function(window) {

// JavaScript code for GridLoaderFx goes here

})(window);

/* CSS code for the grid styling */

.loading::before {
    /* Loading animation styles */
}

/* Additional CSS styles for icons, content alignment, etc. */


<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div class="content content--center">
  <div class="grid grid-masonry">
    <!-- HTML code for the grid items -->
  </div>
</div>

I am now exploring ways to convert this functionality into a reusable Vue component that can be easily rendered on any view page.

Thank you

javascriptvue.jsvuejs2css-animationsvue-cli-3

Answer №1

If you want to add this feature, the first step is installing it using npm

Just run npm install masonry-layout --save in your terminal

Once installed, you can then import it into your component or globally.

To integrate into a Component:

import Masonry from "masonry-layout";

export default {

    mounted: function () {

        // Initialize Masonry layout

        var grid = document.querySelector('.masonry-grid');
        var msnry = new Masonry( grid, {
            // options...
            columnWidth: '.masonry-grid-sizer',
            itemSelector: '.masonry-grid-item',
            percentPosition: true
        });
    }
}

Sample Template for Implementation:

  <template>
   <div>
    <!-- Blog Masonry Blocks -->
    <div class="container ">
        <div class="masonry-grid row ">
            <div class="masonry-grid-sizer col-sm-1"></div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>

            <div class="masonry-grid-item col-lg-3">
                ...
            </div>
        </div>
    </div>
  </div>
</template>

Answer №2

If you're looking to incorporate a masonry layout in your Vue project, consider using npm install vue-masonry-css --save-dev for an easy implementation. Check out the documentation at https://github.com/paulcollett/vue-masonry-css

<masonry
  :cols="3"
  :gutter="30"
  >
  <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
</masonry>

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

Issue encountered when toggling flip switch in Jquery Mobile

I am trying to create a calculator for my app using Jquery Mobile, but I am facing an issue with the flip toggle switch. Here is my script: <script type="text/javascript"> function dosis() { $peso = $('#peso').get(0).value $dosis = ...

javascripthtmljquery-mobile

Insert a design layout into a text entry box

Currently developing an application with AngularJS and seeking a solution for adding a "template" to an HTML input field similar to a placeholder. Specifically, I have a date-field requiring user input in the format of dd/MM/yyyy or through a datepicker se ...

javascripthtmlangularjsangularjs-directive

Steps for retrieving user timezone offset and transmitting it to the server in an ASP.net application

I need assistance with capturing and sending a user's timezone or offset when they successfully sign in. I came across the "getTimezoneOffset" method in JavaScript, but I'm unsure how to automatically send this data without the user explicitly in ...

javascriptasp.netasp.net-mvcasp.net-mvc-5timezone

Two items possess an identical worth

Whenever I make edits, both objects end up being the same. What is the solution to keep them separate? I have an object that I bind to inputs using v-model in order to update it. However, when I edit it without saving changes, the original object gets mo ...

laravelvue.js

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

javascriptjqueryhtmlfocus

What is the best way to delay the rendering of my Vue component until a function call is finished?

After extensive research online, I have been unable to discover a specific solution to my issue. The problem is that I have a Vue component that relies on an init call and I need it to avoid rendering until the call is successfully completed. Once the ca ...

vue.jsvuejs2vue-component

Utilizing ReactJS: Expanding my knowledge of updating array object indexes dynamically when removing elements

Currently, I am in the process of creating a to-do list application to improve my skills in working with ReactJS. This is how my initial state looks like: const [listx, setlistx] = useState( [ {id: 0, flavor: 'strawberry', ...

javascriptarraysreactjs

'this' while being utilized in a nested function

const EventEmitter = require('events').EventEmitter; const Counter = function (init) { this.increment = function () { init++; this.emit('incremented', init); } } ...

javascriptthis

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Currently dealing with a bug that occurs when attempting to push the same string into an array that has already been added. The app becomes stuck and prevents the addition of another string. How can I prevent the repeat from causing the app to get stuck w ...

javascripthtmlangularjsarrays

I'm having trouble getting the code to work properly after the "else" statement using both jQuery and Javascript. My head is

Being a newcomer to javascript and jquery, debugging and viewing log files seem like a challenge compared to php. Any help from experienced individuals would be greatly appreciated. Although my code mostly works fine, I'm having trouble with the if/e ...

javascriptjqueryhtmlif-statement

Top spot for locating resolve functions in AngularJS

I'm currently in the process of setting up resolves for my admin panel routes and I'm pondering the best way to store them without cluttering my router with methods. Here's what I have so far: when('/admin', { templateUrl: &ap ...

javascriptangularjsangularjs-routingangularjs-controller

"Troubleshooting callback errors and viewing statistics in multi-configuration setups

Is it possible to utilize multiple Webpack configs while in watch mode? I have noticed that the compilation callback behaves differently when using build versus watch. I couldn't find any references to this behavior and was curious if anyone else has ...

javascriptnode.jsbuildwebpack

Remove any elements using jQuery that do not contain any content

I need to remove any empty elements from my HTML code. Here is an example of the HTML markup: The HTML markup is stored in a jQuery variable called 'myhtml' and it may contain various tags. <h1> <u> <strong></st ...

javascriptjquery

Is there a Wordpress floating bar similar to the one seen on 9gag?

After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...

javascriptjqueryhtmlcsswordpress

Looking for guidance on implementing a straightforward nested for loop in a Node.js environment

I am facing an issue with my code that is meant to generate a 10x10 grid. Since transitioning to Node.js, I am struggling to make it work correctly due to my synchronous thinking pattern. Currently, the Y values are being assigned directly to 10 for all X ...

javascriptnode.jsfor-loop

Can we utilize object properties in this manner?

Hey there! I've been experimenting with the react-bootstrap library recently, trying to get better at using it. While going through the tutorial, I came across some ES6 code that caught my attention. function FieldGroup({ id, label, help, ...props } ...

javascriptecmascript-6reactjs

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox

Response Looping Function

I am struggling with looping and storing data in an array. /** Model for displaying response*/ export class ResultsData { id: number, name: string, startDate: string, endDarte: string, startTime: string, ...

javascriptarraysangulartypescriptlodash

Is there a way to instruct Google to include my site in its index using Angular.js?

I am currently working on an angular.js app and have been following Google's guide for ajax-based applications. Here are the steps I have taken: Added meta tags <base href="/"> <meta name="fragment" content="!"> Configured angular.js ...

javascriptangularjsindexingseogoogle-index

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

javascriptangularangular-materialangular6ace-editor