BlocksIt瀑布流插件是基于jquery的,使用也非常简单,是为数不多的几款动态瀑布流插件之一。

html代码:

<div style="width:1000px; overflow:hidden; margin:0 auto">    <div class="kppcl" style="width:1008px; position:relative" id="kppcl">     <div class="kppcld">      <div class="kppcld_t">        <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>        <div class="kinfor">          <table width="100%" border="0" cellspacing="0" cellpadding="0">            <tr>              <th>时间:</th>              <td>{#$item.start_date#}-{#$item.end_date#}</td>            </tr>            <tr>              <th>地点:</th>              <td>{#$item.area_name#}</td>            </tr>          </table>        </div>      </div>      <div class="kppcld_b"></div>    </div>     <div class="kppcld">      <div class="kppcld_t">        <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>        <div class="kinfor">          <table width="100%" border="0" cellspacing="0" cellpadding="0">            <tr>              <th>时间:</th>              <td>{#$item.start_date#}-{#$item.end_date#}</td>            </tr>            <tr>              <th>地点:</th>              <td>{#$item.area_name#}</td>            </tr>          </table>        </div>      </div>      <div class="kppcld_b"></div>    </div>     <div class="kppcld">      <div class="kppcld_t">        <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>        <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>        <div class="kinfor">          <table width="100%" border="0" cellspacing="0" cellpadding="0">            <tr>              <th>时间:</th>              <td>{#$item.start_date#}-{#$item.end_date#}</td>            </tr>            <tr>              <th>地点:</th>              <td>{#$item.area_name#}</td>            </tr>          </table>        </div>      </div>      <div class="kppcld_b"></div>    </div>   </div>   <div id="page" style="display: none">    <div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一页</a></div>  </div> </div>

js代码

<script src="/js/blocksit.min.js"></script><script language="javascript" type="text/javascript">  $(window).load( function() {    $('#kppcl').BlocksIt({      numOfCol: 3,      offsetX: 5,      offsetY: 5    });  });   var current_p = 0;  //  $(window).scroll(function(){    // 当到最底部以上100像素时, 加载新内容    if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {      ajax_load_data();    }  });  function ajax_load_data(){    var next_p = $('#page').find('.nextprev').attr('rel');    if(next_p && next_p != current_p){      console.log('nextpage = '+next_p);      current_p = next_p;       $.ajax({        url:'{#url_reset("request/front/ajax","","php")#}',        data:{'act':'ajax_forum','p':next_p},        dataType:'json',        type:'post',        beforeSend:function(){          show_loading_body();        },        complete:function(){          show_loading_body();        },        success:function(data){          if(data.status != undefined && data.status == 'ok'){            if(data.html){              $('#kppcl').append(data.html).BlocksIt('reload');            }             if(data.pages_str){              $('#page').html(data.pages_str);            }          }        }      });    }  }</script>
最新资讯
会员“买1得8”?蜻蜓FM遭集体投诉:骗人的

会员“买1得8”?蜻蜓FM

说好的买1个会员送8个其他App会员,买完以后发现并不是
松下回应“员工发‘918勿忘国耻’被警告”:将核查

松下回应“员工发‘91

松下电器(中国)有限公司微博回应称,针对近日松下员工发布
AMD:已获美国许可 向实体清单中某些公司供货

AMD:已获美国许可 向实

9月15日开始,美国的对华为禁令正式升级,台积电、高通、
中国探月工程副总设计师:嫦娥五号年底前发射

中国探月工程副总设计

预计今年底之前发射“嫦娥五号”,实现月球区域软着陆及
报告:全球科研城市北京排名第一 纽约第二

报告:全球科研城市北京

北京在全球科研城市中再次位列第一,第2至5位分别为纽约
量子通信重大进展:北京成功研制首台量子直接通信样机

量子通信重大进展:北京

实现了10公里光纤链路4kb/s通信速率的量子保密电话,推
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,