layui框架的flow组件常见用法总结

<style>
 ul li {
 height: 200px;
 border: 5px solid green;
 font-size: 50px;
 line-height: 200px;
 text-align: center;
 }
 </style>
 <ul id="newsList"></ul>
 <!-- 条目中可以是任意内容，如：<img src=""> -->
 <script src="~/Content/layui/layui.js"></script>
 <script>
 layui.use('flow', function () {
 var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
 var flow = layui.flow;
 flow.load({
 elem: '#newsList' //指定列表容器
 , isAuto: false //到底页面底端自动加载下一页，设为false则点击'加载更多'才会加载
 //, mb: 100 //距离底端多少像素触发auto加载
 , isLazying: true //当单个li很长时，内部有很多图片，对图片进行懒加载，默认false。
 , end: '<p style="color:red">木有了</p>' //加载所有后显示文本，默认'没有更多了'
 , done: function (page, next) { //到达临界，触发下一页
 var lis = [];
 $.get('/Home/GetList?page=' + page, function (res) {
 //假设你的列表返回在data集合中
 layui.each(res.data, function (index, item) {
 lis.push('<li>' + item + '</li>');
 });
 next(lis.join(''), page < res.pages);//pages是后台返回的总页数
 });
 }
 });
 });
 </script>

public class HomeController : Controller
 {
 // GET: Home
 public ActionResult Index()
 {
 return View();
 }
 public ActionResult GetList(int page)
 {
 //简单数据库中新闻
 List<string> newsList = new List<string>();
 for (int i = 0; i < 55; i++)
 {
 newsList.Add("新闻" + i);
 }
 //总页数
 int pages =(int) Math.Ceiling((double)55 / 10);
　　　　　　　//模拟分页
 var data= newsList.Skip<string>((page - 1) * 10).Take(10);
 return Json(new { data,pages},JsonRequestBehavior.AllowGet);
 }
 }

layui.use('flow', function(){
 var flow = layui.flow;
 //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载
 flow.lazyimg(); //方式一，全部懒加载
 flow.lazyimg({ //方式二，特定容器懒加载
 elem:'#box1' //不设置elem，对页面中所有图片进行懒加载
 ，scrollElem:document
 }) 
});