瀑布流布局插件Grid-A-Licous

最新推荐文章于 2019-08-01 14:07:14 发布

_Seaton

最新推荐文章于 2019-08-01 14:07:14 发布

阅读量560

点赞数

分类专栏： MP+C#+联友前端文章标签：瀑布流布局

本文链接：https://blog.csdn.net/yy228313/article/details/50906114

版权

MP+C#+联友同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

前端

28 篇文章 0 订阅

订阅专栏

1 介绍

该瀑布流布局是横的，而不是CSS的纵向。

官网：http://suprb.com/apps/gridalicious/

从官网中可知

Grid-A-Licous插件的使用只需弄清楚以下知识：（其实就是一个构造方法中的参数说明）

width：每个模块的宽度
gutter：每个模块之间的距离
animate：是否一个个的显示出来
animationOptions：显示模块的详细设置
1. speed：每个模块显示的时间间隔
2. duration：模块从开始显示到完全显示出来所需要的时间，渐变。
3. complete：完全显示后触发的事件。
prepend：在前面添加
append：在后面添加

例子网站：http://www.js-css.cn/a/jscode/flow/2014/0924/1331.html

2 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid-A-Licous插件的使用</title>
    <style>
    .item
    {
        background:#bebebe;
        border-radius:3px;
        padding:10px;
    }
    </style>
</head>
<body>
    <button id="prepend">prepend</button>
    <div id="myLayout" class="gridalicious">
      <div class="galcolumn">
          <div class="item"><img src="images/1.jpg" alt="响应式瀑布流布局插件"/><p>1</p><p>Back in mid 2008, I created a jQuery plugin. I named it Grid-A-Licious and described it as, "Divs are placed in chronological order with a special grid" because I had no clue how to explain it better. I used this script a lot and designed many sites with it during 2008. At first, people were very skept</p></div>
          <div class="item"><img src="images/2.jpg" alt="响应式瀑布流布局插件"/><p>2</p></div>
          <div class="item"><img src="images/3.jpg" alt="响应式瀑布流布局插件"/><p>3</p></div>
          <div class="item"><img src="images/4.jpg" alt="响应式瀑布流布局插件"/><p>4</p></div>
          <div class="item"><img src="images/5.jpg" alt="响应式瀑布流布局插件"/><p>5</p></div>
          <div class="item"><img src="images/6.jpg" alt="响应式瀑布流布局插件"/><p>6</p></div>
          <div class="item"><img src="images/7.jpg" alt="响应式瀑布流布局插件"/><p>7</p></div>
          <div class="item"><img src="images/8.jpg" alt="响应式瀑布流布局插件"/><p>8</p></div>
          <div class="item"><img src="images/9.jpg" alt="响应式瀑布流布局插件"/><p>9</p></div>
          <div class="item"><img src="images/10.jpg" alt="响应式瀑布流布局插件"/><p>10</p></div>
          <div class="item"><img src="images/4.jpg" alt="响应式瀑布流布局插件"/><p>11</p></div>
          <div class="item"><img src="images/5.jpg" alt="响应式瀑布流布局插件"/><p>12</p></div>
          <div class="item"><img src="images/6.jpg" alt="响应式瀑布流布局插件"/><p>13</p></div>
          <div class="item"><img src="images/7.jpg" alt="响应式瀑布流布局插件"/><p>14</p></div>
          <div class="item"><img src="images/8.jpg" alt="响应式瀑布流布局插件"/><p>15</p></div>
      </div>
    </div>
    
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.grid-a-licious.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#myLayout").gridalicious({
            width: 300, //每个模块的宽度
            gutter: 2, //每个模块之间的距离
            animate: true, //true时，加载时一个个的显示出来，false-同时显示出来
            animationOptions: {//当animate为true时可设置具体详情
                speed:200,//设置每个显示的模块显示的间隔时间
                duration:300,//模块重开始显示到完全显示出来的时间，渐变。
                complete:function(data){//全部显示后执行的触发的事件
                    //alert("1"+data);
                }
            },
        });

        //'prepend'，
        makeboxesPrepend = function(){
            //模拟滚动条滚动时随机添加内容
            var boxes = new Array;   
            var randTxt = ['prepend_随机1','prepend_随机2'];
            var amount = Math.floor(Math.random()*10);//随机数n，在添加n-1个模块
            //alert("amount="+amount); 
            //var amount = 1;
            for(i=1;i<amount;i++){
                num = Math.floor(Math.random()*randTxt.length);
                div = $('<div></div>').addClass('item'); 
                content = "<img src='images/"+i+".jpg'/><p>"+randTxt[num]+"</p>";
                div.append(content);
                boxes.push(div);
            }
            return boxes;
        }

        //按钮事件
        $('#prepend').click(function(){
            //在瀑布前添加-不影响之前的
            $('#myLayout').gridalicious('prepend',makeboxesPrepend());
            //在瀑布后添加-不影响之前的
            //$('#myLayout').gridalicious('append',makeboxesPrepend());
        });
    </script>

</body>
</html>

3 效果图

图1

图2 单击prepend后，不影响原理的布局

_Seaton

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流布局插件Grid-A-Licous

1 介绍官网：http://suprb.com/apps/gridalicious/从官网中可知Grid-A-Licous插件的使用只需弄清楚以下知识：（其实就是一个构造方法中的参数说明）width：每个模块的宽度gutter：每个模块之间的距离animate：是否一个个的显示出来animationOptions：显示模块的详细设置speed：每个模块显示的时间间隔
复制链接

扫一扫