BlocksIt 瀑布流插件是基于 jquery 的,使用也非常简单,是为数不多的几款动态瀑布流插件之一。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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>
来源: