Am using k2 extensions to display k2 items in a Masonry Style (because photos are not of the same height)
The link is here : https://explora.mu/hd-photos/most-popular
The photos are displayed correctly but not in the right order:
Code: Select all
I would like the output to be:
| item 1 | item 2 | item 3 | item 4
| item 5 | item 6 | item 7 | item 8
| item 9 | item 10 | item 11 | item 12
how the items are being displayed now:
| item 1 | item 4 | item 7 | item 10
| item 2 | item 5 | item 8 | item 11
| item 3 | item 6 | item 9 | item 12
Code: Select all
.tagItemList {
-webkit-column-count: 4;
-moz-column-count:4;
column-count: 4;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin: 1.5em 0;
padding: 0;
font-size: .85em;
}
.tagItemView {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 33px;
width: 100%;
-webkit-transition:1s ease all;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #aaa;
border: 1px solid #eaeaea;
}
.tagItemView img {
max-width:100%;
}
Is there a simple trick (preferably without JS) that can make the ordering happen ?
P.S. The layout file (on override) is annexed.
Thanks !