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
Vote
Sign in
(thinking…)
Password icon
Signed in as (Sign out)
You have left! (?) (thinking…)
Simon shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

2 comments

Sign in
(thinking…)
Password icon
Signed in as (Sign out)
Submitting...
  • 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">
    jQuery.noConflict();
    jQuery(window).load(function(){
    // init Masonry
    var grid = jQuery('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 310
    });
    // layout Masonry after each image loads
    grid.imagesLoaded().progress( function() {
    grid.masonry('layout');
    });});
    </script>

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

    Hope this helps
    Paul

Feedback and Knowledge Base