Welcome, Old Sport!

动态自动排列布局模板

by ilikecss ON 2012/09/27 7416

动态自动排列布局模板

动态布局(Dynamic Layout)在移动设备里用的比较多,由于其性能的柔韧性较高被业界人士所拥戴,当然一些响应性网站也有此功能,在页面缩放的时候具有动态效果。动态布局有一个jQuery的插件(插件来源: http://masonry.desandro.com/),加载这款插件后可以使页面内设定元素按浏览器宽度自适应动态调正,调整状态也是具有动画效果,不像以前的效果比较生硬。下面就来介绍一下这动态布局使用方法。

Step1. 创建HTML

<article class="box">
    <a href="#">
        <div>
        <img alt="1" src="img/1.jpg">
        </div>
    </a>
</article>

容器结构可以随意自行设置,以上我是HTML5格式,DIV就可以了。

Step2. 插入jQuery和脚本

$(function() {
        var $container = $('#main-content'); //根据此ID号来判定容器是否为动态布局,可自行更换
        $container.imagesLoaded(function(){
                $container.masonry({
			itemSelector : 'article',
			columnWidth : 5
		});
         });
});

别忘了加载插件和jQuery

<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>
6条评论
  1. #1

    龙荣海说道:

    你真的太棒了,很喜欢你的网站

  2. #2

    兔斯基的萝卜耶夫说道:
  3. #3

    金刚禅狮子吼说道:

    简单易用好东西顶你一下~ :roll:




TOP