实用瀑布流画廊

所属分类:UI-布局

 42267  403  查看评论 (17)
分享到微信朋友圈
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'


相关插件-布局

html5响应式模板

黑色通用的软件科技公司html5响应式模板
  布局
 45070  646

jQuery bootstrap响应式单页网站模板

jQuery bootstrap响应式简洁的紫色风格单页网站模板
  布局
 18596  252

Bootstrap响应式网站,模板

Bootstrap响应式网站模板,风格简洁大气。
  布局
 35811  503

简洁美观的后台管理模板SuperAdmin2

jQuery Bootstrap 响应式后台管理模板SuperAdmin2
  布局
 51808  537

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

    Cc. 0
    2022/8/10 20:42:36
    初夏?乱了心 0
    2020/12/3 16:48:47
    可以直接用吗?
        云麟0
        2023/11/21 14:54:06
        可以
    回复
    哈雷 0
    2019/7/19 15:03:06
    回复是不是送jq币啊
        云麟0
        2023/11/21 14:54:24
        可能吧
    回复
    枫桥 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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复