column_view

Revamp version "columns_layout" deployed

Please visit here for more

COLUMN_VIEW is jquery plug-in for making column view like CSS column count do

The child DOM in the column_view will re-ordering from left to the right, from top to the bottom, also feasible to span column.

How to use

Start Using

$( SELECTOR ).columnView();

The child og the div which using "column_view" need to have class name "column_item"

<div class="column_item" data-col-span="3"><div>

Demo Code:

    <div class="column_view">
        <div class="column_item" data-col-span="3">
            <div>
                <h2>1</h2>
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
        </div>

        <div class="column_item">
            <div>
                <h2>2</h2>
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            </div>
        </div>
    </div>

    <script>
        $(".column_view").columnView({ 
            columnCount: 6, 
            columnGap:12 
        });
    </script>

Parameters:

    <script>
        $(".column_view").columnView({ 
            columnCount: 6, 
            columnGap:12 
        });
    </script>

columnCount -- control column count (default in 3)
columnGap -- control the gap(px) between columns (default in 20)

HTML Attribute:

control the item spans columns

data-col-span = "2"

DEMO Link:

http://johnsonhklhk.com/column_view/

REMARK:

It need to re-run the code While window reize, and you can insert different parameters in different screen width for breakpoint.

$(window).resize(function(){
    if($(window).width() > 768){
            $(".column_view--1").columnView({ columnCount: 4, columnGap: 20 });
            $(".column_view--2").columnView({ columnCount: 3, columnGap: 6 });
    } else {
            $(".column_view--1").columnView({ columnCount: 2, columnGap: 12 });
            $(".column_view--2").columnView({ columnCount: 3, columnGap: 6 });
    }
})