CH2-1 JS套件

masonry設定紀錄

JS啟動碼

            var $grid = $('.grid').imagesLoaded( function() {
                $('.grid').masonry({
                  // options
                  itemSelector: '.grid-item',
                  fitWidth: true,
                  gutter: 30
            });

CSS設定

.grid{
    margin: 0 auto;
    display: block;
}
.grid-item { 
    width: 200px;
    background: rgba(0,0,0,.3);
    margin-bottom: 30px;
}

Html設定(需設置外圍，內容才有辦法整體置中)

<div class="col-xs-12">
    <div class="grid">
        <div class="grid-item">

        </div>
    </div>
</div>

Wookmark 設定

html設定

    <div class="container">
        <ul class="grid col-xs-12">
            <li class="grid-item"><img src="img/layout_07.jpg" alt=""></li>
            <li class="grid-item"><img src="img/layout_08.jpg" alt=""></li>
            <li class="grid-item"><img src="img/layout_11.jpg" alt=""></li>
            <li class="grid-item"><img src="img/layout_14.jpg" alt=""></li>
            <li class="grid-item"><img src="img/layout_17.jpg" alt=""></li>
            <li class="grid-item"><img src="img/layout_18.jpg" alt=""></li>
        </ul>
    </div>

Css設定(必須要設定float優先靠左)

.grid{
    padding: 0;
    list-style: none;
}
.grid-item{
    float: left;
      -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

JS設定

var wookmark; imagesLoaded('.container', function() { wookmark = new Wookmark('.container ul', { offset:0, fillEmptySpace: true }); });