Menu
Impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Isotope is a tool in the Javascript UI Libraries category of a tech stack. Isotope is an open source tool with 9.8K GitHub stars and 1.4K GitHub forks. Here’s a link to Isotope 's open source repository on GitHub.
All options are optional, but
itemSelector is recommended. Layout modes have their own separate options.
RecommendeditemSelector
Specifies which child elements will be used as item elements in the layout.
We recommend always setting
itemSelector . itemSelector is useful to exclude sizing elements or other elements that are not part of the layout.
LayoutlayoutMode
Sets the layout mode used to position items. Default is
layoutMode: 'masonry' See Layout modes.
percentPosition
Sets item positions in percent values, rather than pixel values.
percentPosition: true works well with percent-width items, as items will not transition their position on resize.
Element sizing
Sizing options like
masonry: columnWidth , masonry: gutter , and packery: columnWidth can be set with an element. The size of the element is then used as the value of the option.
The option can be set to a Selector String or an Element.
Element sizing options allow you to control the sizing of the Isotope layout within your CSS. This is useful for responsive layouts and media queries.
stamp
Specifies which elements are stamped within the layout. Isotope will layout items around stamped elements.
The masonry, packery, and masonryHorizontal layout modes support stamping.
The
stamp option stamps elements only when the Isotope instance is first initialized. You can stamp additional elements afterwards with the stamp method.
stamp can be set to a Selector String, Element, or an Array-like object of Elements.
originLeft
Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with
originLeft: true . Set originLeft: false for right-to-left layouts.
originLeft was previously isOriginLeft in Isotope v2. isOriginLeft will still work in Isotope v3.
originTop
Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to
false for bottom-up layouts. It’s like Tetris!
originTop was previously isOriginTop in Isotope v2. isOriginTop will still work in Isotope v3.
Filteringfilter
Shows items that match the filter and hides items that do not match. See Filtering.
If set to a string, that value is used as a selector.
If
filter is set to a function, that function checks each item and returns true or false if the item should be shown or hidden.
SortinggetSortData
Isotope reads data from HTML with the
getSortData option. See Sorting: getSortData .
getSortData is set with an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.
sortBy
Sorts items according to which property of
getSortData . See Sorting: sortBy . The value of sortBy needs to match a key name in getSortData .
Two additional
sortBy options are built in.
To sort by multiple properties, you can set
sortBy to an array of key names.
sortAscending
Sorts items ascendingly if
sortAscending: true “A, B, C…”, “1, 2, 3…”, or descendingly if sortAscending: false , “Z, Y, X…”, “9, 8, 7…”.
You can set ascending order for each
sortBy value by setting sortAscending to an object.
Transitionsstagger
Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format,
'0.03s' , or as a number in milliseconds, 30 .
transitionDuration
Duration of the transition when items change position or appearance, set in a CSS time format, or as a number in milliseconds. Default:
transitionDuration: '0.4s'
hiddenStyle & visibleStyle
The styles applied to hide and reveal items when filtering.
SetupcontainerStyle
CSS styles that are applied to the container element. Def
resize
Adjusts sizes and positions when window is resized. Enabled by default
resize: true .
resize was previously isResizeBound in Isotope v2. isResizeBound will still work in Isotope v3.
initLayout
Enables layout on initialization. Enabled by default
initLayout: true .
Set
initLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout.
initLayout was previously isInitLayout in Isotope v2. isInitLayout will still work in Isotope v3.
Isotope can position items with different layout modes. Set and change the layout mode with the
layoutMode option.
2
4
6
8
10
12
Layout mode optionsIsotope Js Alternative Medicine
Layout modes can have their own separate options. These are set in a corresponding object within the options.
Isotope Js Alternative ModelHorizontal layouts
Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and horiz) need a container that has a height value. Be sure that your CSS has height set.
Included layout modesmasonry , fitRows , and vertical are included in Isotope by default. All other layout modes need to installed separately.
Layout modesmasonry
The default layout mode. Items are arranged in a vertically cascading grid.
See masonry layout mode.
fitRows
Items are arranged into rows. Rows progress vertically. Similar to what you would expect from a layout that uses CSS floats. fitRows works well for items that have the same height.
Isotope Js Alternative Program
See fitRows layout mode.
vertical
Items are stacked vertically.
See vertical layout mode.
packery
The
packery layout mode uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” It works similarly to masonry , except gaps will be filled.
See
packery layout mode.
cellsByRow
A vertical grid layout where items are centered inside each cell. The grid is defined by
columnWidth and rowHeight options.
See cellsByRow layout mode.
masonryHorizontal
Horizontal version of masonry. Items are arranged in a horizontally cascading grid.
See
masonryHorizontal layout mode.
fitColumns
Items are arranged into columns. Columns progress horizontally.
fitColumns works well with items that have the same width.
Isotope Js Alternative Name
See
fitColumns layout mode.
cellsByColumnIsotope Js Alternative Video
A horizontal grid layout where items are centered inside each cell. The grid is defined by
columnWidth and rowHeight options.
See
cellsByColumn layout mode.
horiz
Items are arranged horizontally.
See
horiz layout mode.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |