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>

更多信息请查看IT技术专栏