瀑布流

大概是用了... jquery.min.js、jquery.prettyPhoto.js 、 isotope.js、 masonry-home.js 這幾個吧。

index.php

<div id="fourcol" class="portfolio">
<div class="item-w1 item-h2 box cat1">
    <figure class="effect-layla">
     <a href="view.php" title="文字內容"><img src="_photo/1.jpg" alt="" class="img-responsive"></a>
        <figcaption>
            <div class="buttons">
                <p><a href="view.php?v=1#view">#1</a></p>
                <a href="view.php?v=1#view" title="文字內容"><i class="fa fa-search"></i></a>
            </div>
        </figcaption>           
    </figure>
</div><!-- end box -->
</div>

javascript 部分

var lockkey=1; // LOCK 防 race condiction
var exit=0; // STOP ajax 沒資料了
function test() {
if(lockkey==1&&exit==0){ lockkey=0; // 鎖上
var num=$('div.item-w1.item-h2.box.cat1').length; // 計算數量
$.ajax({
    url: 'load.php',
    data: {'n':num},
    type:"POST",
    dataType:'text',
    success: function(msg){
        // console.log('s');
    },
    error:function(xhr, ajaxOptions, thrownError){ 
        // console.log(xhr.status); 
        // console.log(thrownError); 
    }
}).done(function(msg) {
if(msg==='exit'){console.log('stop');exit=1;}
// ====== 收到ajax的html資料(也有可能是空的，那也沒差) =======
    // 收到的html轉成物件
var $items = $(msg);
    // 你要放的位置
var $grid = $('.portfolio'); 
    //塞入資料
$grid.append( $items ).isotope( 'appended', $items );
    // 這邊的計算位置方式 從網路上找來改的 這得自行理解了
    // 請參考
    // http://stackoverflow.com/questions/20721768/preload-images-with-isotope-and-bootstrap-3
    // http://isotope.metafizzy.co/layout-modes/masonry.html
    colWidth = function () {
        var w = $grid.width(), 
            columnNum = 1,
            columnWidth = 50;
        if (w > 1200) {
            columnNum  = 5;
        } 
        else if (w > 900) {
            columnNum  = 3;
        } 
        else if (w > 600) {
            columnNum  = 2;
        } 
        else if (w > 300) {
            columnNum  = 1;
        }
        columnWidth = Math.floor(w/columnNum);
        $grid.find('.box').each(function() {
            var $item = $(this),
                multiplier_w = $item.attr('class').match(/item-w(\d)/),
                multiplier_h = $item.attr('class').match(/item-h(\d)/),
                width = multiplier_w ? columnWidth*multiplier_w[1]-0 : columnWidth-5,
                height = multiplier_h ? columnWidth*multiplier_h[1]*1-5 : columnWidth*0.5-5;
            $item.css({
                width: width,
                height: height
            });
        });
        return columnWidth;
    };
    function refreshWaypoints() {
        setTimeout(function() {
        }, 3000);   
    };
    $('nav.portfolio-filter ul a').on('click', function() {
        var selector = $(this).attr('data-filter');
        $grid.isotope({ filter: selector }, refreshWaypoints());
        $('nav.portfolio-filter ul a').removeClass('active');
        $(this).addClass('active');
        return false;
    });
    function setPortfolio() { 
        setColumns();
        $grid.isotope('reLayout');
    };
    $grid.imagesLoaded( function() {
        $grid.isotope();
    });
    isotope = function () {
        $grid.isotope({
            resizable: true,
            itemSelector: '.box',
            layoutMode : 'masonry',
            gutter: 10,
            masonry: {
                columnWidth: colWidth(),
                gutterWidth: 0
            }
        });
    };
isotope();
$(window).smartresize(isotope); //調整位置

lockkey=1; //解鎖
        });
    }
}

// 觸發的地方 // 每次滑動都會檢查 
// 2016.7.29 - 下面程式測過 IE8~Edge firefox chrome safari 比較新的版本都沒問題
jQuery(window).scroll(function(){
//======= 不斷增加 =======
var $wrapper = $(this),
 _height = $wrapper.height(), //空隙高度
 _scrollHeight =  jQuery(document).context.body.scrollHeight, // 總高度
 _maxScrollHeight = _scrollHeight - _height - 10; // 最大可滑動高度
 _least = 30; // 距離底部多少就可以, 0 表示得完全到底部

// 如果高度已經達到指定的高度就啟用 
// 最大可滑動-已經滑動 <= 距離
if(_maxScrollHeight - jQuery(this).scrollTop() <= _least){
    test();
    console.log('s');
}

//====== 回到最高點 ======
if (jQuery(this).scrollTop() > 1) {
jQuery('.backtotop').css({bottom:"25px"});
} else {
jQuery('.backtotop').css({bottom:"-100px"});
}
});
jQuery('.backtotop').click(function(){
jQuery('html, body').animate({scrollTop: '0px'}, 800);
return false;
});

load.php

// 這邊自己來拉
// 反正就
foreach( ... ){
    echo
    '<div class="item-w1 item-h2 box cat1">',
        // ....
    ,'</div>';
}
exit;