diff --git a/README.md b/README.md index 0083539..3970f14 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,18 @@ FlexMasonry is a lightweight, zero-dependency, masonry (cascading grid layout) l ## Features -* **Lightweight** - Just 6KB of JS and CSS -* **Fast** - Uses CSS flexbox for layout -* **Responsive** - Show different number of columns at different breakpoints -* **Simple** - Just 3 options +- **Lightweight** - Just 6KB of JS and CSS +- **Fast** - Uses CSS flexbox for layout +- **Responsive** - Show different number of columns at different breakpoints +- **Simple** - Just 3 options [See a demo](https://flexmasonry.now.sh/) ## Install -* Download the [latest release](https://github.com/gilbitron/flexmasonry/releases). -* Clone this repo. -* Install using NPM/Yarn: +- Download the [latest release](https://github.com/gilbitron/flexmasonry/releases). +- Clone this repo. +- Install using NPM/Yarn: ``` npm install flexmasonry @@ -29,7 +29,10 @@ yarn add flexmasonry Then, include the `flexmasonry.js` and `flexmasonry.css` files from the `dist` folder in your HTML. Or you can use the files directly from a CDN: ```html - + ``` @@ -39,18 +42,18 @@ Set up your HTML. For example: ```html
-
-
-
-
-
+
+
+
+
+
``` Then hook up the script, passing in the selector target: ```js -FlexMasonry.init('.grid'); +FlexMasonry.init(".grid"); ``` FlexMasonry will then convert all `.grid` elements to masonry grids with multiple columns. @@ -82,15 +85,20 @@ The second, optional, parameter of the `init` method is an object containing opt * no matter the width of the screen. */ numCols: 4, + /* + * If you want to give gap between of the columns/row + */ + gap: 0, } ``` For example, to always shown 6 columns in your grid: ```js -FlexMasonry.init('.grid', { - responsive: false, - numCols: 6 +FlexMasonry.init(".grid", { + responsive: false, + numCols: 6, + gap: 2, }); ``` @@ -102,21 +110,21 @@ The `FlexMasonry` variable has several methods: Initialises the FlexMasonry library and sets up the `targets` as masonry grids. -* `targets` can be a string, an array of elements or a `Node​List`. -* `options` [see above](#options). +- `targets` can be a string, an array of elements or a `Node​List`. +- `options` [see above](#options). **`refresh(target, options = {})`** Refreshes the `target` grid layout. -* `target` must be an `Element`. -* `options` [see above](#options). +- `target` must be an `Element`. +- `options` [see above](#options). **`refreshAll(options = {})`** Refreshes the grid layouts of all `targets` passed to `init()`. -* `options` [see above](#options). +- `options` [see above](#options). **`destroyAll()`** @@ -141,9 +149,9 @@ A good question! You _can_ use pure CSS to achieve the same outcome. However, th To show your support for my work on this project: -* [Star this repository](https://github.com/gilbitron/flexmasonry/stargazers) -* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Fflexmasonry) -* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship) +- [Star this repository](https://github.com/gilbitron/flexmasonry/stargazers) +- [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Fflexmasonry) +- [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship) ## Credits diff --git a/demo/index.html b/demo/index.html index d4f87d6..bc1d2c0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,72 +1,194 @@ - - - + + + FlexMasonry - - - + + +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
- + diff --git a/dist/flexmasonry.css b/dist/flexmasonry.css index 82cde48..cc2b16f 100644 --- a/dist/flexmasonry.css +++ b/dist/flexmasonry.css @@ -10,14 +10,7 @@ align-content: space-between; } -.flexmasonry-item { width: 100%; } -.flexmasonry-cols-2 .flexmasonry-item { width: 50%; } -.flexmasonry-cols-3 .flexmasonry-item { width: 33.333%; } -.flexmasonry-cols-4 .flexmasonry-item { width: 25%; } -.flexmasonry-cols-5 .flexmasonry-item { width: 20%; } -.flexmasonry-cols-6 .flexmasonry-item { width: 16.666%; } -.flexmasonry-cols-7 .flexmasonry-item { width: 14.285%; } -.flexmasonry-cols-8 .flexmasonry-item { width: 12.5%; } +.flexmasonry-item { width: 100%; box-sizing: border-box; } .flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) { order: 1; } .flexmasonry-cols-2 .flexmasonry-item:nth-child(2n) { order: 2; } diff --git a/dist/flexmasonry.js b/dist/flexmasonry.js index f729e88..09533cc 100644 --- a/dist/flexmasonry.js +++ b/dist/flexmasonry.js @@ -4,4 +4,4 @@ * Author: Gilbert Pellegrom * License: MIT */ -var FlexMasonry=function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){t(1),e.exports=t(2)},function(e,n,t){},function(e,n,t){"use strict";t.r(n);const r={responsive:!0,breakpointCols:{"min-width: 1500px":6,"min-width: 1200px":5,"min-width: 992px":4,"min-width: 768px":3,"min-width: 576px":2},numCols:4};let o=null,i={},s=[];function a(){s.forEach(function(e){c(e)})}function l(){o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame(function(){y()})}function c(e){if(d()<2)return void e.style.removeProperty("height");let n=[];Array.from(e.children).forEach(function(e){if(e.classList.contains("flexmasonry-break"))return;const t=window.getComputedStyle(e),r=t.getPropertyValue("order"),o=t.getPropertyValue("height");n[r-1]||(n[r-1]=0),n[r-1]+=Math.ceil(parseFloat(o))});const t=Math.max(...n);e.style.height=t+"px"}function f(e){const n=e.querySelectorAll(".flexmasonry-break");if(Array.from(n).length!==d()-1)for(let n=1;n