基于jQuery简单可自定义响应式手机电脑端瀑布流

所属分类:UI-布局

 34544  335  查看评论 (11)
分享到微信朋友圈
X
基于jQuery简单可自定义响应式手机电脑端瀑布流 ie兼容9

使用该网格瀑布流布局需要引入jQuery和jaliswall.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jaliswall.js"></script>


HTML结构

该瀑布流特效使用一个<div>作为包裹容器。在它里面,可以使用<a>元素来包裹图片和它的标题元素。

<div class="wrapper">
        <ul class="wall">
            <li class="article">
                    <img src="…" />
            </li>
            <li class="article">
                    <img src="…" />
            </li>
            <li class="article">
                    <img src="…" />
            </li>
            <li class="article">
                    <img src="…" />
            </li>
        </ul>
</div>


CSS样式

需要为该瀑布流特效添加下面的一些必要的CSS样式。

.wall {
  display: block;
  position: relative;
}
.wall-column {
  display: block;
  position: relative;
  width: 50%;
  float: left;
  padding: 0 2%;
  box-sizing: border-box;
}
.article {
  display: block;
  margin: 0 0 8% 0;
  padding: 5%;
  background: white;
  border-radius: 3px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 100;
  overflow: hidden;
  position: relative;
}
.article:hover{ transform: scale(1.01);}
.article img {
  display: block;
  width: 100%;
  margin: 0 0 5% 0;
}

其中.wall-column的width属性用于控制每行显示多少列,例如,要想每行显示3列,可以设置为width:33.333333%。


初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该网格瀑布流插件。

$(function(){
    $('.wall').jaliswall({ item: '.article' });
});


相关插件-布局

基于Bootstrap绿植盆景商城模板

响应Bootstrap电子商务模板,园艺、室内植物绿化相关电商网站。容易定制网站改变每一个元素。
  布局
 31520  491

jQuery bootstrap响应式招聘类网站模板

jQuery bootstrap响应式招聘类网站模板,自适应移动端
  布局
 14127  226

sefolio透明风格的单页网站模板

透明风格的单页网站模板
  布局
 35254  511

HTML5带视差效果网页模板

html5响应式网页背景图片视差滚动
  布局
 35194  481

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? 0
    2020/1/6 17:02:56
    有分页效率太低了、 回复
    寂寞游神归来 0
    2019/3/29 18:47:44
    挺好的,使用了
        ASce0
        2019/6/5 17:57:14
        每次加载更多时,都要重新初始化一次
    回复
    毕竟1米8 0
    2018/10/10 9:28:47
    有bug 不是插入最短的li里
        不愿意透露姓名的葫芦娃i0
        2018/11/30 17:34:24
        你可以自己调整
    回复
    wm50 0
    2018/2/28 18:03:13
    伟仔 0
    2016/4/28 12:04:06
    试试能不能用
        areyouOk0
        2019/5/20 10:33:23
        不错,好用的。
    回复
    小小小鱼 0
    2016/3/29 14:03:51
    太多的话就会重新初始化,太麻烦了 回复
    kouss 0
    2016/2/17 9:02:18
    每次加载更多时,都要重新初始化一次???好麻烦而且会顺序错乱 回复
    柳飞花落 0
    2015/12/29 15:12:59

    这叫响应式?请一个专业的前端网站正确区分响应式网页和自适应网页好吗?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复