瀑布流
大概是用了... 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;