jQuery.masonry+Infinite ScrollをMTに併せる

movable-type jQuery.masonry+Infinite ScrollをMTに併せる
最終更新日: 2023年4月15日

<!--Masonry-->
<div id="masonry-wrap"><!--任意のIDだが下部スクリプトvar $containerと一致させる-->
<MTPageContents count="60"><!--一度（ページ）あたりの個数-->
<mt:Entries>
<div class="box-small">
<div class="box-inner-small">
<h3 class="mansonry-small">
<span class="sixteen">
<a href="<MTEntryPermalink>">
<MTEntryTitle>
</a>
</span>
</h3>
<div class="masonry-img-small">
<a href="<MTEntryPermalink>">
<img src="<mt:EntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g',''>" width="207" alt="<MTEntryTitle>" />
</a>
</div>
</div>
</div>
<$MTPageSeparator$>
</mt:Entries>
</MTPageContents>
</div>
<!--Navi-->
<mt:SetVarBlock name="count">
<mt:Entries>
<$MTCategoryCount$>
</mt:Entries>
</MTSetVarBlock>
<mt:If tag="CategoryCount" le="20">
<mt:Else>
<div id="page-nav">
<a href="index_2.php"></a>
</div>
</mt:If>
<!--/Navi-->
<script type="text/javascript" src="<MTBlogURL>js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="<MTBlogURL>js/jquery.infinitescroll.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#masonry-wrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box-small',
animationOptions: {
duration: 1000
}
});
});
$container.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.box-small',
loading: {
finishedMsg: '',
img: '<MTBlogURL>object/loader.white.gif'
}
},
function( newElements ) {
var $newElems = $( newElements );

$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
<!--/Masonry-->

このタグ組ではエントリータイトルと画像を出力するが、お好みによりentryexcerpt等を併せる。css等により成形。

また、jqueryは別途head内に。

CSS
div#masonry-wrap {
width:720px;
margin:0 ;
padding:0;
overflow:visible;
scrolling:auto;
line-height:100%;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color:#333333;
background-color: transparent;
}
div.box {
float:left!important;
width:350px;
height:400px;
margin:5px 5px 5px 5px;
padding:0;
text-align:center;
overflow:hidden;
background-color: transparent;
background-image: url(object/2012_77.jpg) ;
background-position:top center;
background-repeat:no-repeat;
}
div.box-inner {
width:347px;
margin:0px 3px 4px 0;
padding:0;
text-align:center;
overflow:hidden;
background-color: transparent;
}
div#masonry-wrap h3 {
display:block;
margin:15px 10px 20px 10px!important;
padding:0;
text-align:left;
vertical-align:baseline;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size:14px;
line-height:120%;
font-weight:normal;
letter-spacing:0;
color:#333333;
background-color: transparent;
background-image:none!important;
background-color: transparent;
border:0;
}
div#masonry-wrap h2 {
width:170px;
margin:0!important;
padding:0!important;
font-size:16px!important;
font-weight:normal;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color:#EEEEEE;
line-height:120%;
vertical-align:baseline;
letter-spacing:-1px;
}
div.masonry-img {
width:327px;
height:218px;
margin: 0 10px 0 10px;
display:block;
background-color: transparent;
overflow:hidden;
}
div.masonry-excerpt {
width:327px;
margin:auto;
padding:10px;
color:#333333;
font-size:12px;
text-align:left;
display:block;
line-height:200%;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
div#page-nav {
position:absolute;
bottom:200px;
}

実際使用しているものから抜粋したので適せんマークアップする。