Welcome, Old Sport!

精美的自动布局模板

by ilikecss ON 2013/06/26 11371

精美的自动布局模板最近工作实在太忙,没怎么更新文章,见谅了各位。白天工作,晚上回家就是运动,然后就是睡觉,连晚饭都省了。一些同学也喜欢我写一些网页效果的文章教程,的确也有段时间不搞了,最近对技术十分苛刻,一些简单的不好看的我也就不折腾了。
isotope是一款支持网页模块自适应布局的jQuery插件,个人十分喜欢,对这款插件做了一定的了解后,结合此款插件和一些特效制作了今天的这个网页模板,此类瀑布流的布局很多朋友都比较喜欢,下面一起来看下折腾步骤吧!

Step1. HTML代码

<div class="item orgfonce isotope-item"> 
    <div class="vignette"><img alt="1" src="img/img01.jpg"></div>
    <div class="resume">
        <h2>title</h2> 
        <h3>sub title</h3>
        <p class="accroche">Description: text text text texttext text text texttext text text texttext text text text</p>
        </div>
    <div class="bottom">
        <p class="more"><a  class="plus" href="#">Detail</a><a class="moins" href="#">Close</a></p>
    </div>
</div><!-- 1 -->

Step2. CSS样式


/* 模块CSS */
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
/* 背景色 */
.orgfonce { background-color:#FF9374;}
.blackfonce { background-color:#000;}
.redfonce { background-color:#F00;}
.bluefonce { background-color:#39C;}
.pinkfonce { background-color:#F69;}
.greyfonce { background-color:#999;}
.greenfonce { background-color:#096;}

由于我添加了布局以外的效果,所以CSS代码较长,大家下载后自己看吧。

Step3. 脚本代码

$(function () {
	//函数Isotope
	if($('body').attr('class') == 'violet equipe'){
		var $container = $('#container');
		$container.isotope({
			itemSelector: '.membre',
			masonry : {
				columnWidth : 226
			}
		});
	}else{
		var $container = $('#container');
		$container.isotope({
			itemSelector: '.item',
			masonry : {
				columnWidth : 210
			}
		});	
	}
	
	//查看详细按钮设置
	$('.more a.plus').click(function() {
		$('#container').prepend($(this).parent().parent().parent())
			.isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
		$('#container .item').removeClass('large');
		$('#container .item .detail').hide();
		$('#container .item .moins').hide();
		$('#container .item .plus').show();
		$(this).parent().parent().parent().children('.detail').show();
		$(this).parent().parent().parent().addClass('large');
		$(this).next().show();
		$(this).hide();
		$container.isotope('reLayout');
		$('body,html').animate({scrollTop : 0},'slow');
		return false;
	});
	
	//关闭按钮设置
	$('.more a.moins').click(function() {
		$(this).parent().parent().parent().removeClass('large');
		$(this).parent().parent().parent().children('.detail').hide();
		$(this).prev().show();
		$(this).hide();
		$container.isotope({ sortBy: 'original-order' });
		return false;
	});
});

别忘了加载jQuery和插件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="isotope.js"></script>

通过扫描二维码下载:

14条评论
  1. #1

    ilikecss说道:

    自沙一下 :sad:

  2. #2

    votan说道:

    俺也想弄个响应式的网站。慢慢学习~

  3. 最近开始学CSS,终于找到想要的参考网站了。

  4. #4

    小A说道:

    :razz: C兄的前端功底扎实啊,待我新主题空出友链地方,咱链一个“?

  5. #5

    tonnytong说道:

    看来几篇觉得很不错哦,整个网站的布局都很漂亮,配色也很好,动画很流畅。喜欢 :neutral:

  6. #6

    Kayo说道:

    这个值得拥有,感觉比我之前用的另一款jQuery相应布局插件好用!

  7. #7

    追着紫色的梦说道:

    看到jq,js就头疼,肿么办

  8. #8

    jason说道:

    好喜欢

  9. #9

    jason说道:

    :!: 学习了。




TOP