jQuery非对称瀑布插件Flex

所属分类:UI-布局

 6017  49  查看评论 (4)
 jQuery非对称瀑布插件Flex ie兼容8

如何使用

调用所需要的文件

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.flex.js"></script>

Html每个块间距10px

<div class="flex">
    <a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325" height="175">A</a>
    <a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
    <a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
    <a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
    <a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
    <a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
    <a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
    <a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
    <a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
    <a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
    <a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
</div>

样式

<style>
    .flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
    .flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
    [bg=a] {background-image:url(img/6448917381_0b754e86fb_z.jpg);}
    [bg=b] {background-image:url(img/7362866426_bf285ebd45.jpg);background-size:300px auto;}
    [bg=c] {background-image:url(img/7410370290_0935419fc3.jpg);}
    [bg=d] {background-image:url(img/7419245080_bb752ed1d6.jpg);}
    [bg=e] {background-image:url(img/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
    [bg=f] {background-image:url(img/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
    [bg=g] {background-image:url(img/7322604950_348c535903.jpg);background-size:auto 200px;}
    [bg=h] {background-image:url(img/7286717012_6e6b450243.jpg);}
    [bg=i] {background-image:url(img/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
    [bg=j] {background-image:url(img/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
    [bg=k] {background-image:url(img/7269592732_c4b7918626.jpg);background-size:auto 280px;}
</style>

最后, 调用插件

<script type="text/javascript">
    $(function() {
        $(".flex").flex();
    });
</script>
相关插件-布局

基于bootstrap的UI框架Funky Tunes UI Kit

这个Funky Tunes组件设计有梦幻般的美丽,适合用在音乐、视频类的APP或网站。基于bootstrap的UI框架Funky Tunes UI Kit非常实用
  布局
 14081  92

仿瓣瓣首页

仿瓣瓣官网首页,仅供学习
  布局
 12192  110

响应式教育培训机构HTML5模板

本模板是一个多页和多用途HTML模板适合学校、教育学校、幼儿园、小学、中学、大学、学术和教育。
  布局
 13337  182

jquery内容响应插件respontent

respontent是一个jQuery插件自动使你的用户生成的内容响应。 支持图像,视频,表,地图等内容
  布局
 10632  32

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    SUN 0
    2017/8/21 9:27:40

    很好

        L0
        2017/8/21 16:03:38

        哦哦

    回复
    SiriBen 0
    2017/8/19 14:57:21

    个人感觉还不如把style里面的bg-x写到html中去,不然没法动态啊

    回复
    kathy22222 0
    2017/8/18 8:56:23
取消回复