A wrapper component that arranges the passed items in a masonry layout.
Installation
$ npm install masonry-layout-react --save
How to use
This component takes an array of cards (it may be a react component or an html div) as children and arranges them in masonry layout. Props:
- columnCount: to specify number of columns. Default is set to 3. Type is 'number'.
- verticalSpacing: in pixels to specify the vertical distance between 2 cards. Default is set to 40 pixels. Type is 'number'.
- horizontalSpacing: in pixels to specify the horizontal distance between 2 cards. Default is set to 20 pixels. Type is 'number'.
- containerClass: to add a custom class to the main container enclosing all cards.
- cardWrapperClass: to add a custom class to each card.
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ------- ---- ----------------------- ----- ----- - ---- --- --- --- --- --- --- --- --- --- --- --- --- ---- ---------------- --------- ----------------- ---------------------- ------------------------ -- --- ------------------- ---- -- ------------ ---------- -------- ---- ---- ---- --- -------------- ---- --- ------------ -------------------------------- --
#Example 1
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ------- ---- ----------------------- ----- ----- - ---- --- --- --- --- --- --- --- --- --- --- --- --- ---- ---------------- --------- ----------------- ---------------------- ------------------------ -- --- ------------------- ---- -- ------------ ---------- --------- --------------- ---------------- - --------- -- -------------- ---- --- ------------ -------------------------------- --
#Example 2
-- -------------------- ---- ------- ------ ------ ----------- ---------- ---- -------- ------ ------- ---- --------------------- ------ ------------- ----- ---- ------- --------- - ------- --------- - - ------- ---------------- -- --------- - -------- - -------- -------------------------------------- --------------------------------- --------- ---- -- - ----- --- ------- --------- - -------------- - ---------- ------------ - - --------- - ----- ------------- ------- -------- -------- --- --------- ---------- ---- ----- --- ------- ------- ----- --- -------- - ---- ---- ------ ---- ---- ----- -------- -- ----- ------- ------ --- ---- ---- ----- ------- ------ ---- ----- ------ ---- ----- ------ ----- ------------- ---- ------ ------ -- ----- ----- --- ------- ---------- ---- ----- --- ------- ------- ----- --- -------- - ---- ---- ------ ---- ---- ----- -------- -- ----- ------- ------ --- ---- ---- ----- ------- ------ ---- ----- ------ ---- ---- ---- ------ ---- ----- ----- ----- --- ------ --- ------- ------ --- -- ----- ----- ----- -------- ------ ------- ------ ---- ------- -- ---- ---- ---- ---- --- ---- ---- ------------ ---- --- --- -- -- ---- ----- ---- ---- --- ----- ------ ----- ------------- ---- ---- -------- --- ------ ---- ------------ ---------- ---- ----- --- ------- ------- ----- --- -------- -- ------ ---- ----- ------ ---- ---- ---- ------ ---- ----- ----- ----- --- ------ --- ------- ------ --- -- ----- ----- ----- -------- ------ ------- ------ ---- --------- ------ ----- ------------- ------ ---- --------- ------- ------ ------- ---------- ---- ----- --- ------- ------- ----- --- -------- - ---- ---- ------ ---- ---- ----- -------- -- ----- ------- ------ --- ------ ------ ----- ------------- ---- ------ ------ -- ----- ----- --- ------- ---------- ---- ----- --- ------- ------- ----- --- -------- - ---- ---- ------ ---- ---- ----- -------- -- ----- ------- ------ --- ---- ---- ----- ------- ------ ---- ----- ------ ---- ---- ---- ------ ---- ----- ----- ----- --- ------ --- ------- ------ --- -- ----- ----- ----- -------- ------ ------- ------ ---- ------- -- ---- ---- ---- ---- --- ---- ---- ------------ ---- --- --- -- -- ---- ----- ---- ---- --- ----- ------ ----- ------------- ------ ---- --------- ------- ------ ------- ---------- ---- ----- --- ------- ------- ----- --- -------- - ---- ---- ------ ---- ---- ----- -------- -- ----- ------- ------ --- ------ ----- ---- --- -- --------- - -------- - ----------- ------------------- ------------------------ -------------------------- ----------------------------------- --------------------------------------- ---- ----- -------------------------------- ---- -- -------------- ---------- ------------ ----------- -- ---------------- ------ ----- ------------- ---- -- -
Check out full examples in the examples folder
HomePage
https://github.com/kan2029/masonry-layout-react#readme
Repository
git+https://github.com/kan2029/masonry-layout-react.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606881e8991b448de8c5