html瀑布流布局layui,瀑布流插件jquery.waterfall.js 的使用
$(function() {
$('#div1 a').lightBox();
});
.jq22-container {
margin-top: 50px;
}
#div1 {
margin: auto;
position: relative;
}
.box {
float: left;
padding: 10px;
border: 1px solid #ccc;
background: #f7f7f7;
box-shadow: 0 0 8px #ccc;
}
.box:hover {
box-shadow: 0 0 10px #999;
}
.box img {
width: 240px;
}
//一般直接写在一个js文件中
layui.use(['form', 'layedit', 'laydate','layer','flow'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,flow = layui.flow
,laydate = layui.laydate;
//按屏加载图片
flow.lazyimg({
elem: '#LAY_demo3 img'
});
});
var start = '';
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url:/*[[@{/threefloor/images/frist}]]*/ ,
success: function (res) {
if (res.success) {
start = res.data.start;
var strs= new Array();
var str2 = "";
strs=res.data.imgurl.split(","); //字符分割
for(var i = 0; i < strs.length; i++) {
str2 += '
';
}
jQuery(str2).appendTo(jQuery("#div1"));
jQuery('#div1 a').lightBox();
}
},
error : function() {
layer.msg("异常!");
}
});
$("#div1").waterfall({
itemClass: ".box",
minColCount: 2,
spacingHeight: 10,
resizeable: true,
ajaxCallback: function(success, end) {
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url:'/threefloor/images/more?start='+start,
success: function (res) {
if (res.success) {
start = res.data.start;
var strs= new Array();
var str2 = "";
strs=res.data.imgurl.split(","); //字符分割
for(var i = 0; i < strs.length; i++) {
str2 += '
';
}
jQuery(str2).appendTo(jQuery("#div1"));
jQuery('#div1 a').lightBox();
success();
end();
}
},
error : function() {
layer.msg("异常!");
}
});
}
});
html瀑布流布局layui,瀑布流插件jquery.waterfall.js 的使用相关推荐
- 什么是瀑布流布局?瀑布流布局的实现方法
网页在进行布局的时候,有时会用到一种布局方式叫做瀑布流布局,那么,瀑布流布局是什么样的呢?本篇文章将来给大家介绍一下关于瀑布流布局的实现方法. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握 ...
- 页面打印插件 jquery.jqprint.js 插件使用实例
页面打印插件 jquery.jqprint.js 插件使用实例 jquery.jqprint.js 插件下载 jqprint 是一个基于jQuery编写的页面打印的一个小插件,可以对页面指定元素的内容 ...
- ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...
- jQuery插件 -- Cookie插件jquery.cookie.js(转)
2019独角兽企业重金招聘Python工程师标准>>> jQuery插件 -- Cookie插件jquery.cookie.js(转) Cookie是网站设计者放置在客户端的小文本文 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...
- 判断浏览器 插件 jquery.ua.js
判断浏览器 插件 jquery.ua.js /*!* jquery.ua.js* @link https://github.com/cloudcome/jquery.ua* @author ydr.m ...
- html让gif图片暂停,控制gif图片播放暂停插件-jquery.gif.js
插件描述:jquery.gif.js是一款可以对Gif图片进行预览和播放的jQuery插件. 效果预览: Gif图片预览和播放jQuery插件-jquery.gif.js 简要教程 jquery.gi ...
- jquery数字动画插件jquery.animateNumber.js
jq数字动画插件-jquery.animateNumber.js,可以实现数字的动画显示效果,比如从1跑到36500,从1%跑到100%类似这样的效果,数字动画效果控制多样,非常不错. jquery. ...
- 拖拽插件jquery.dad.js
带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
最新文章
- 通过Windows DShow获取设备名、支持的编解码及视频size列表实现
- C++ 创建单级、多级目录
- [创业经验] 白手起家的艺术
- 抓包(Charles工具入门)
- Oracle入门(十二A)之数据类型
- 麻省理工学院计算机专业2018,麻省理工学院专业排名一览及最强专业推荐(QS世界大学排名)...
- Java 链表数据修改
- ASP.NET没有魔法——开篇-用VS创建一个ASP.NET Web程序
- 对付镜像网站非常有效的办法
- 硬盘的分区误删除的恢复
- 经验分享 | 我是如何从小白到收获几个不错的offer!
- 二叉树的高度_完全二叉树的子节点数
- java毕业设计_景区旅游信息管理系统
- balabala视频格式转换器
- 给销售组织分配分销渠道
- 什么是内存对齐以及作用
- hdu-2191悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 HDU - 2191(多重背包)
- The Tennessee Waltz
- 曾国藩【挺经】全文 不错的文章,值得学习!
- 跨境电商未来将合规化发展——扬帆牧哲