UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

实用瀑布流画廊

所属分类：UI-布局

 43665  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'


相关插件-布局
查看更多

jQuery响应组织图(更新)

 jQuery响应组织图不仅支付纵向结构，还支付横向结构
  布局
 46930  376

Helsinki高端Bootstrap HTML5响应式后台模板

 Helsinki是一套前端管理模板是建立在Bootstrap框架之上充分响应可以在任何设备上使用。
  布局
 64560  766

超酷响应式网站模板

 超酷响应式网站模板，用户可自己选择颜色样式
  布局
 42033  582

bootstrap商城模板

 基于bootstrap的优秀后台模板
  布局
 58713  550

讨论这个项目（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
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复