要素の高さを揃える滋賀県守山市のホームページ制作

jQuery

要素の高さを揃える

★要素の高さを揃える
tile.js
————
横に並ぶ要素数を指定

<script src="../js/tile.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
  $(".tile").tile(3);
});
</script>

————
レスポンシブ:横幅の変更で変更

<script src="/js/tile.js" type="text/javascript"></script>
<script type="text/javascript">
//ページを読み込んだ時
$(window).load(function(){
    windowSize();
});
 
//ページをリサイズした時
$(window).resize(function(){
    windowSize();
});
 
//カラムを揃える関数
function windowSize(){
    //上のカラム
    $('.tile').tile();
    //下のカラム
    var w = $(window).width();
    var x = 640-20;//ウインドウサイズからスクロールバーの横幅を引く
    if (w <= x) {
        $('.tile').tile(3);//640px以下だったら2カラムずつ揃える
    } else {
        $('.tile').tile(4);//641px以上だったら3カラムずつ揃える
    }
}
</script>