I suggest you ...

Masonry layout for items view

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

3 votes
Sign in
Sign in with: facebook google
Signed in as (Sign out)
You have left! (?) (thinking…)
Simon shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: facebook google
Signed in as (Sign out)
  • Paul commented  ·   ·  Flag as inappropriate

    I achieved this using http://masonry.desandro.com.
    You have to change the file components/com_djcatalog2/views/items/tmpl/default.php
    In here you change the class .djc_items by .grid

    then in here components/com_djcatalog2/views/items/tmpl/default_items you chenge the class ".djc_row" by ".grid-item".

    then in the <head> of your template add :
    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
    <script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
    <script type="text/javascript">
    // init Masonry
    var grid = jQuery('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 310
    // layout Masonry after each image loads
    grid.imagesLoaded().progress( function() {

    310 is the column width that you can change.
    And in css you change the item width : .grid-item{width:300px}

    Hope this helps

Feedback and Knowledge Base