ブラウザの幅からはみ出た要素を切り捨てる

harada 567views 更新:2014年5月13日

複数の要素をブロック状に並べていて、ブラウザの幅からはみ出した場合要素をはみ出して表示するのではなく、非表示にして常に綺麗に並べる方法です。

Browser size aware content scaling を利用します。

HTML

<div class="imgFit">
<a href="#"><img src="01.png" alt="" /></a>
<a href="#"><img src="02.jpg" alt="" /></a>
<a href="#"><img src="03.gif" alt="" /></a>
<a href="#"><img src="04.png" alt="" /></a>
<a href="#"><img src="05.jpg" alt="" /></a>
<a href="#"><img src="06.gif" alt="" /></a>
</div>

CSS

.imgFit a img {
    width: 200px;
    height:200px;
    border: 1px solid #666;
    padding: 0;
    margin: 10px;
}

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).bind("resize", calculateContent);
    calculateContent();
});

function calculateContent( e ) {
   $(".imgFit a").show();
   var imageWidth = 222;
   var contentAreaWidth = $(".imgFit").width();
   var itemsPerRow = Math.floor(contentAreaWidth / imageWidth);
   var totalNrOfItems = $(".imgFit a").length;
   var fullRows = Math.floor(totalNrOfItems / itemsPerRow);
   var itemsToHide = totalNrOfItems - fullRows * itemsPerRow;
   for(var i = totalNrOfItems; i > totalNrOfItems - itemsToHide; i--) {
      var remover = i - 1;
      $(".imgFit a:eq("+remover+")").hide();
   }
}
</script>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません