实用瀑布流画廊

所属分类:UI-布局

 32998  329  查看评论 (13)
分享到微信朋友圈
X
实用瀑布流画廊 ie兼容8

使用方法

DOM准备:

<div id="main">
	<div class="img"> <img src="1.jpg" size="398*636" />
		<p class="tip">这是tip1</p>
	</div>
</div>
<div id="img">
	<div id="img-container"></div>
	<img src="" draggable="false">
	<p id="tip"></p>
	<div id="btn-left"></div>
	<div id="btn-right"></div>
</div>

以上就构成了可以实现效果的最小DOM,

这里id="img"内的DOM结构是不能变的,图片部分的类名和ID可以更改

JS配置:

//config
//图像最小单位类选择器名
var imgClassname = 'img';
//图像说明类选择器名
var pClassname = 'tip';
//应用瀑布流的图像的类选择器名
var waterClassname = 'img';
//应用瀑布流的图像的宽度
var imgWidth = 150;
//图像最小单位父级容器的ID
var parentIdName = 'main'


相关插件-布局

超炫黑色大气简约功能完整响应式模板带留言功能和个人主页

功能完整响应式模板带留言功能和个人主页 带php文件,完整整站模板
  布局
 35560  638

win8风格个人网站

Win8界面,HTML5,兼容PC端和移动端
  布局
 34878  446

Amaze UI后台管理模板

Amaze UI后台管理模板
  布局
 91445  674

扁平化风格响应式后台管理模板

基于bootstrap后台管理界面
  布局
 49419  466

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

    哈雷 0
    2019/7/19 15:03:06
    回复是不是送jq币啊 回复
    枫桥 0
    2018/10/17 11:22:00
    眼中 星空 0
    2018/9/17 16:52:13
    坐井观天 0
    2018/7/20 10:28:44
    插件客服-小鸟 0
    2018/6/3 10:09:38
    这个效果很不错,改天试下 回复
    Ryn 0
    2018/3/15 18:24:10
    为什么扣页面代码没有效果,下载后发现是自己粗心了 回复
    Jary 0
    2017/8/11 17:26:46

    看起来感觉不错

    回复
    达尔 0
    2017/7/13 9:52:59
    黑心・土豆 0
    2016/12/12 14:12:12
    回复能加钱吗??
        Sandm0
        2017/7/14 9:39:03

        不知道啊

    回复
    要D大调 0
    2016/9/29 10:09:55
    都是图片来用的吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复