Home >Web Front-end >CSS Tutorial >Waterfall flow layout and infinite loading picture album effect
Waterfall flow layout and infinite loading picture album effect
- php中世界最好的语言Original
- 2018-03-22 15:18:462944browse
This time I will bring you Waterfall flow layout and the effect of unlimited loading of picture albums. What are the precautions to achieve the effect of waterfall flow layout and unlimited loading of picture albums? The following is the actual practice. Let’s take a look at the case.
Directory
1. The pic1.html page code is as follows:
2. The entity class Photoes.cs code that simulates database data is as follows:
3. The general handler Handler1.ashx code for the server to return data to the client is as follows:
4. Sample download:
5. Learn more about waterfall flow layout
First Let me show you the effect of waterfall flow layout and infinite loading picture album:
## 1. The pic1.html page code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局与无限加载图片相册</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(../img/bg5.jpg);
}
#items {
width: 1060px;
margin: 0 auto;
border: 1px solid lightpink;
}
.item {
border: 1px solid lightpink;
width: 200px;
color: purple;
font-size: 30px;
font-weight: bolder;
margin: 5px;
text-align: center;
opacity: 0.8;
}
img {
width: 200px;
}
</style>
</head>
<body>
<p id="items">
<p class="item"><img src="img/1.jpg" />picture-1</p>
<p class="item"><img src="img/2.jpg" />picture-2</p>
<p class="item"><img src="img/3.jpg" />picture-3</p>
<p class="item"><img src="img/4.jpg" />picture-4</p>
<p class="item"><img src="img/5.jpg" />picture-5</p>
<p class="item"><img src="img/6.jpg" />picture-6</p>
<p class="item"><img src="img/7.jpg" />picture-7</p>
<p class="item"><img src="img/8.jpg" />picture-8</p>
<p class="item"><img src="img/9.jpg" />picture-9</p>
<p class="item"><img src="img/10.jpg" />picture-10</p>
<p class="item"><img src="img/11.jpg" />picture-11</p>
<p class="item"><img src="img/12.jpg" />picture-12</p>
<p class="item"><img src="img/13.jpg" />picture-13</p>
<p class="item"><img src="img/14.jpg" />picture-14</p>
<p class="item"><img src="img/15.jpg" />picture-15</p>
<p class="item"><img src="img/16.jpg" />picture-16</p>
<p class="item"><img src="img/17.jpg" />picture-17</p>
<p class="item"><img src="img/18.jpg" />picture-18</p>
<p class="item"><img src="img/19.jpg" />picture-19</p>
<p class="item"><img src="img/20.jpg" />picture-20</p>
</p>
<a href="Handler1.ashx" id="next">下一页</a>
<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<!--插件的引用-->
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
//此方法用来初始化图片（图片全部加载完成时调用）
var init = function () {
imagesLoaded(document.querySelector('#items'), function (instance) {
//此方法用来设置瀑布流布局
var msnry = new Masonry("#items", {
itemSelector: ".item",
columnWidth: 0 //列与列之间的宽度
});
//alert('所有的图片都加载完成了');
});
}
init();
var num = 0;
//此方法是无限加载的方法
$("#items").infinitescroll({
navSelector: "#next",
nextSelector: "a#next",
itemSelector: ".item",
debug: true,
dataType: "json",
maxPage: 10,
appendCallback: false,
path: function (index) {
console.log(index);
return "Handler1.ashx?page=" + index;
}
}, function (data) {
num -= 20;
for (var i = 0; i < data.length; i++) {
$("<p class='item'><img src='img/" + (data[i].imgUrl + num) + ".jpg' />" + data[i].Name + "</p>").appendTo("#items")
console.log(data[i].imgUrl + "--" + data[i].Name);
}
init();
});
</script>
</body>
</html>
2. The entity class Photoes.cs code for simulating database data is as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace 瀑布流布局与无限加载图片相册
{
public class Photoes
{
public int imgUrl { get; set; }
public string Name { get; set; }
//模拟数据库有两百条数据
public static List<Photoes> GetData()
{
List<Photoes> list = new List<Photoes>();
Photoes pic = null;
for (int i= 21; i <=200; i++)
{
pic = new Photoes();
pic.imgUrl = i;
pic.Name = "Picture-" + i;
list.Add(pic);
}
return list;
}
}
}3. Server The code of Handler1.ashx, a general handler that returns data to the client, is as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
namespace 瀑布流布局与无限加载图片相册
{
/// <summary>
/// 服务器返回数据给客户端的一般处理程序
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<Photoes> result = Photoes.GetData();
int pageIndex = Convert.ToInt32(context.Request["page"]);
var filtered = result.Where(p => p.imgUrl >= pageIndex * 20 - 19 && p.imgUrl <= pageIndex * 20).ToList();
JavaScriptSerializer ser = new JavaScriptSerializer();
string jsonData = ser.Serialize(filtered);
context.Response.Write(jsonData);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}Summary: I learned about waterfall flow layout and image loading some time ago, and made a simple example. I hope Can consolidate the knowledge one has learned. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
CSS to achieve 3D button effect
The above is the detailed content of Waterfall flow layout and infinite loading picture album effect. For more information, please follow other related articles on the PHP Chinese website!