No replies
kurt0123
kurt0123's picture
Offline
newbie
Mauritius
Last seen: 7 weeks 3 days ago
Mauritius
Timezone: GMT+4
Joined: 2021-07-30
Posts: 2
Points: 4

Hello,

My site is based on Joomla and I use k2 extensions to display photos in a Masonry Style (because photos are not of the same height.

The link is here : Photo website dedicated to Mauritius

The photos are displayed correctly but not in the right order.

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

My CSS:

.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%;
}

I think it's the way Column-count CSS works. Getting the layout in rows (i.e. same height adjusted to fit in one row) would surely sort out the issue but I prefer the Column-count layout.

Is there a simple trick (preferably without JS) that can make the ordering happen ?

P.S. I wanted to annex the HTML layout file (in zip) here but error message when posting.

Thanks !