ログイン
英会話| 婚活| 北海道専門学校| 東北専門学校| 東海専門学校| 沖縄専門学校| ホームページ制作| 2万円HP制作|

ブログテンプレート制作目録

ボックスをfloatさせたとき隙間を埋めてくれるjQueryプラグイン

現在の位置:TOP >  Javascript / jQuery >  ボックスをfloatさせたとき隙間を埋めてくれるjQueryプラグイン

ボックスをfloatさせたとき隙間を埋めてくれるjQueryプラグイン。つか、グリッドレイアウト

こちらの記事は書留程度に書いています。

いつも書留だけど。

 

■jquery.masonry.min.js

http://masonry.desandro.com/jquery.masonry.min.js

 

上記URLを読み込んでもいけるとは思いますが、相手側のサーバに負荷をかけてしまいますので、コードはDL(もしくはエディターにコピペ)して保存しましょう。

 

ソースコードは続きにあります。

jquery.masonry.min.jsを読み込む前にjQuery Libraryの最新版を読み込ます必要があります。最新版でなくても良いかもしれませんが。。

 

http://code.jquery.com/jquery-1.8.3.min.jsにコードが書かれてるので、全コピペ。保存してアップロード。保存時の名前はそのまま分かりやすくjquery-1.8.3.min.jsで良いと思います。

 

jQuery Masonryの参照元のルートはこちら

http://masonry.desandro.com/

 

http://masonry.desandro.com/jquery.masonry.min.jsに書かれているコードが下記になります。これも全コピペし、保存してアップロード。保存時の名前はそのまま分かりやすくjquery.masonry.min.jsで良いと思います。

 

/**
 * jQuery Masonry v2.1.06
 * A dynamic layout plugin for jQuery
 * The flip-side of CSS Floats
 * http://masonry.desandro.com
 *
 * Licensed under the MIT license.
 * Copyright 2012 David DeSandro
 */
(function(a,b,c){"use strict";var d=b.event,e;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,c){var d=this,f=arguments;a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){b.event.handle.apply(d,f)},c==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()},b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[];var d=this.element[0].style;this.originalStyle={height:d.height||""};var e=this.options.containerStyle;for(var f in e)this.originalStyle[f]=d[f]||"";this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left";var g=this.element.css("padding-"+this.horizontalDirection),h=this.element.css("padding-top");this.offset={x:g?parseInt(g,10):0,y:h?parseInt(h,10):0},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var i=this;setTimeout(function(){i.element.addClass("masonry")},0),this.options.isResizable&&b(a).bind("smartresize.masonry",function(){i.resize()}),this.reloadItems()},_init:function(a){this._getColumns(),this._reLayout(a)},option:function(a,c){b.isPlainObject(a)&&(this.options=b.extend(!0,this.options,a))},layout:function(a,b){for(var c=0,d=a.length;c

 

最終的には<head>~</head>内に下記コードを記述します。

とは言え、これはあくまでドメイン直下にjsディレクトリがあった場合の書き方です。

また、hogehoge.comも思いつきで書いたものなので直してください。

<script type="text/javascript" src="http://hogehoge.com/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://hogehoge.com/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
$(function(){
$('.hogehoge').masonry();
});
</script>

 

ページトップへ ページトップへ
ページボトムへ

制作してる人

profile
プロフィールは個別に作りたいと思うのは自分だけでしょうか?上の画像は訓練校に居た頃制作。デッサンしたことあるけど、これはただのラクガキです。ちょっとレイヤー効果追加。

ブログテンプレート量産中!・・・でも今はPHPとjQueryで遊んでるラボの人です。

最近はラボよりもWordPressやタウンネットブログのエンジンを使ってサイト制作(仕事)をやってます。

QRコード

ブログテンプレート制作目録

RSS

RSS1.0 RSS2.0