Macy.js---lightweight waterfall layout with Javascript

Macy.js is a javascript library plugin which can customize the columns,margin depended on different browser resolution.It's very friendly to responsive design websites and it's lightweight which is only 4KB and min version 2KB.

Github here

Step1:
Link macy.js

Step2:
html

html

CSS

css

The images contains in the parents DOM.

Step3:
JS

Here the container is the section named macy-container.And columns margin should be set you want. breakAt: the conditions when the attributes change,when the resolutions change. Like the responsive css ways: @media screen and (max-width:XXX){...}

More details from gitHub:

Options:

container

Default: None

Use this option to specify your target container element to apply Macy too. All direct children of an element with this selector will become sortable items and a height applied to the target container.

columns

Default: 4

Define the default amount of columns to work with. Use the breakAt option to specify breakpoints for this value.

trueOrder

Default: false

Setting this to false will prioritise equalising the height of each column over the order of the items themselves.

margin

Default: 0 Adjust the margin between columns with a pixel value. Don’t forget you can still apply padding to the elements with standard CSS.

Added in v2.1 you can now have an object for margin. This is optional you can set the margin property to just a number and macy will use it for both. But if you would like to add a different xMargin or yMargin then you can do so like this

margin: {
  x: 10,
  y: 16  
}

When declaring the default margin as an object it requires both and x and y values unlike the breakAt object.

waitForImages

Default: false If set to true, Macy will wait for all images on the page to load before running. Set to false by default, it will run every time an image loads.

useOwnImageLoader

Default: false

Set this to true if you would prefer to use a different image loaded library.

mobileFirst

Default: false

Setting this value to true will alter how the breakAt options will work. Macy will now work in a mobile first way so the default columns will be the default then if for example you have 400: 2 in your breakAt object, if the document is greater or equal to 400px the column count will be 2.

breakAt

Default: None This object allows you to specify how the total number of columns will change based on the width of the viewport. Setting an option to 780: 3 for example will adjust the column count to 3 when the viewport is <= 780px. If the viewport resizes after the page has loaded, Macy will rerun to ensure optimum sorting

If the column is set to one then Macy will remove all styling to leave you to style it perfectly on mobile.

Added in v2.1 breakAt now supports changing margin within these breakpoints.

For example

{
  breakAt: {
    760: {
      margin: {
        x: 20,
        y: 10,
      },
      columns: 4
    }
  }
}

If you do not need the modify the margin you can leave it as 760: 4 and macy will set the columns to 4. You can also just define a change in just one marginal direction for example:

{
  breakAt: {
    760: {
      margin: {
        x: 20,
      },
      columns: 4
    }
  }
}

This would change the xMargin to 20px when screens are smaller than 760, but the instance will use a previously declared y value.

Methods:

recalculate

*Parameters: {Boolean} refresh - can be null & {Boolean} loaded -can be null *

When called this recalculates the entire layout, this becomes useful if you just used ajax to pull in more content:

macyInstance.recalculate();

runOnImageLoad

Parameters: {Function} - Function to run on image load & {Boolean} If true it will run everytime an image loadsl

runOnImageLoad is a method used to do something each time and image loads or after all images have been loaded. This helps when using Ajax to make sure the layout is worked out correctly when images are loading. Using this in conjunction with the recalculate function makes your layouts look great no matter how long it takes to load in your images:

macyInstance.runOnImageLoad(function () {
  macyInstance.recalculate(true);
}, true);

If you only require it to run once all the images have loaded you can acheive this by passing null as the first parameter:

macyInstance.runOnImageLoad(function () {
  console.log('I only get called when all images are loaded');
  macyInstance.recalculate(true, true);
});

If you only require the during function to run then only pass it one function:

macyInstance.runOnImageLoad(function () {
  console.log('Every time an image loads I get fired');
  macyInstance.recalculate(true);
}, true);

remove

Parameters: None

Remove does exactly what it says on the tin, it removes all styling and event listeners that Macy added to the DOM:

macyInstance.remove();

reInit

Parameters: None

Reinitialises the current macy instance;

macyInstance.reInit();

on

Parameters: {String} - Event key, {Function} the function to run when the event occurs

This would console log when all images are loaded.

macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE. function (ctx) {
  console.log('all images have loaded');
});

emit

Parameters: {String} - Event key

Emit an event, although macy does not utilise most of these events, these are more to trigger your own functions.

Search This Blog

CodemySite_Web development