74.js---移动端文章的瀑布流的实现。

移动端文章的瀑布流的实现。

  1.首先在前端html页面已经通过PHP代码循环完全数据。

 2.然后在js先全部隐藏，通过判断滑动到底部，每次加载一部分数据，直到数据全部显示完全。

js代码：

 

// 瀑布流

• //获取文章的总长度
• var liLength=$(".trim-content-active li").length;
• //规定每次加载的数据条数
• var page=10
• //一共加载多少次---本案无用
• var liH= Math.ceil(liLength/page);
• //加载列表数量的初始值
• var linn=0;
• console.log(liLength,liH);
• for(var i=page;i<liLength+1;i++) {
• //首先显示十条，其余的都隐藏
• $(".trim-content-active li").eq(i).hide();
• console.log(linn, i,"linn")
• //当滑到手机底部的时候
• $(window).scroll(function () {
• var scrollTop = $(this).scrollTop();
• var scrollHeight = $(document).height();
• var windowHeight = $(this).height();
• if (scrollTop + windowHeight == scrollHeight) {
• //滚动到底部执行事件
• //当总数是10的倍数时
• if(linn<liLength){
• //todo 不应该算条数，应该算次数（现在是算条数）
• linn = linn + page;
• $(".trim-content-active li").eq(linn + page).prevAll().show();
• $(".trim-content-active li").eq(linn + page).show();
• console.log("正在加载中",linn,liLength);

• //当总数没有规律时
• }else if(linn>liLength){
• //最后一条前面所有的兄弟都显示
• $(".trim-content-active li").eq(liLength-1).prevAll().show();

• //最后一条显示

• $(".trim-content-active li").eq(liLength-1).show();

• $(".trim-content-active>li:last-child").after("<section class=\"all-end\">\n" +
      "    <i><img src=\"/public/static/sj/img/icon/icon-end.png\" alt=\"\"></i>\n" +
      "    <p></p>\n" +
      "    <span>已经翻到底啦</span>\n" +
      "</section>")

• }else{
• console.log("跳出")
• }
• }
• });
• }

 本文原创，转载请标明作者，违者必究！