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
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Simon shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    2 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      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