No nonsense, just code directly,

Front desk:

<?php
$category=$this->getmyval ("category", $_ get);
$xiaohualist=xiaohua ::model ()->getxiaohao ($category);//Open the data displayed by default on the page
?>
<div>
  <?php foreach ($xiaohualist as $xiaohua):?>
    <?php $q_id=$xiaohua->id;?>
    <div>
      <div><span aria-hidden="true"></span><strong><?php echo chtml ::encode ($xiaohua->title);?</strong></div>
      <div><?php echo $xiaohua->content;?></div>
      <div<span onclick="fx (<?php echo $q_id;?>);" data-id="<?php echo $q_id;?""><span aria-hidden="true"></span>share</span></div>
    </div>
  <?php endforeach;?>
</div>
<script>
var opt={
 getresource:function (index, render) {//index is the number of times loaded,render is a rendering interface function,Takes a dom collection or jquery object as a parameter.
Data obtained through asynchronous methods such as ajax can be passed into this interface for rendering.
Like render (elem)
   var html="";
   var _url="?php echo $this->createurl (" listxiaohua ");?>";
   $.ajax ({
    type:"get",    url:_url,    datatype:"json",    async:false,    success:function (data) {
      for (var i in data) {
        var q_id=data [i] .id;
        html +="<div><div><span aria-hidden =" true "></span><strong + q_id +" ">" + data [i] .title + "</strong> ;</div><div + q_id + "">"+ data [i] .content +"</div>"
           + "<div><span onclick =" fx ("+ q_id +");"data-id =" "+ q_id +" "><span aria-hidden =" true "<//span>Share</span></div></div>";
      }
   }});
   return $(html);
 }, column_width:376, column_space:10, auto_imgheight:true, insert_type:1
}
$("#waterfall"). waterfall (opt);
</script>

Backstage:

public function actionlistxiaohua () {
  $xiaohualist=xiaohua ::model ()->getxiaohua ();//Get joke information
  echo cjson ::encode ($xiaohualist);
}

js:

(function ($) {
  var
  //parameter
  setting={
   column_width:240, //Column width
   column_classname:"waterfall_column", //The class name of the column
   column_space:2, //Column spacing
   cell_selector:". cell", //The selector of the bricks to be arranged,context is the entire external container
   selector:"img", //The selector of the image to load
   auto_imgheight:true, //whether you need to calculate the height of the picture automatically
   fadein:true, //Whether fade in loading
   fadein_speed:600, ///fade rate,Unit millisecond
   insert_type:1, //Cell insertion method,1 is to insert the shortest column,2 for sequential insertion
   getresource:function (index) {} //Get dynamic resource function,Must return a collection of brick elements,Incoming parameter is the number of loadings
  },  //
  waterfall=$. waterfall=(), //outer information object
  $waterfall=null;//container
  waterfall.load_index=0, //load times
  $.fn.extend ({
    waterfall:function (opt) {
     opt=opt || {};
     setting=$. extend (setting, opt);
     $waterfall=waterfall. $waterfall=$(this);
     waterfall. $columns=creatcolumn ();
     render ($(this) .find (setting.cell_selector) .detach (), false);
     waterfall._scrolltimer2=null;
     $(window) .bind ("scroll", function () {
       cleartimeout (waterfall._scrolltimer2);
       waterfall._scrolltimer2=settimeout (onscroll, 300);
     });
     waterfall._scrolltimer3=null;
     $(window) .bind ("resize", function () {
       cleartimeout (waterfall._scrolltimer3);
       waterfall._scrolltimer3=settimeout (onresize, 300);
     });
    }
  });
  function creatcolumn () {//Create column
   waterfall.column_num=calculatecolumns ();//Number of columns
   //Creating columns
   var html="";
   for (var i=0;i<waterfall.column_num;i ++) {
     html +="<div + setting.column_classname +" "+ setting.column_width +" px;display:inline-block;* display:inline;zoom:1;margin-left:"+ setting.column_space/2 +" px;margin -right:"+ setting.column_space/2 +" px;vertical-align:top;overflow:hidden "></div>";
   }
   $waterfall.prepend (html);//Insert column
   return $("." + setting.column_classname, $waterfall);//column collection
  }
  function calculatecolumns () {//Calculate the number of columns required
   var num=math.floor (($waterfall.innerwidth ())/(setting.column_width + setting.column_space));
   if (num<1) {num=1;} //guaranteed at least one column
   return num;
  }
  function render (elements, fadein) {//rendering elements
   if (! $(elements) .length) return;//No element
   var $columns=waterfall. $columns;
   $(elements) .each (function (i) {
     if (! setting.auto_imgheight || setting.insert_type == 2) {//If an image height is given,Or insert them in order,You don't have to wait for the image to load to calculate the height of the column
       if (setting.insert_type == 1) {
        insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
       } else if (setting.insert_type == 2) {
        insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
       }
       return true;//continue
     }
     if ($(this) [0] .nodename.tolowercase () == "img" || $(this) .find (setting.img_selector) .length>0)
       var image=new image;
       var src=$(this) [0] .nodename.tolowercase () == "img"?$(this) .attr ("src"):$(this) .find (setting.img_selector) .attr ("src");
       image.onload=function () {//The size can be calculated automatically after the image is loaded
         image.onreadystatechange=null;
         if (setting.insert_type == 1) {
           insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
         } else if (setting.insert_type == 2) {
           insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
         }
         image=null;
       }
       image.onreadystatechange=function () {//Handle browser cache issues such as ie:the onload event will not be triggered after the image is cached
         if (image.readystate == "complete") {
           image.onload=null;
           if (setting.insert_type == 1) {
            insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
           } else if (setting.insert_type == 2) {
            insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
           }
           image=null;
         }
       }
       image.src=src;
     } else {//don't worry about image loading
       if (setting.insert_type == 1) {
         insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
       } else if (setting.insert_type == 2) {
         insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
       }
     }
   });
  }
  function public_render (elems) {//ajax get the element's rendering interface
   render (elems, true);
  }
  function insert ($element, fadein) {//Insert the element into the shortest column
   if (fadein) {//gradually show
     $element.css ("opacity", 0) .appendto (waterfall. $columns.eq (calculatelowest ())). fadeto (setting.fadein_speed, 1);
   } else {//not gradually
     $element.appendto (waterfall. $columns.eq (calculatelowest ()));
   }
  }
  function insert2 ($element, i, fadein) {//Insert elements in turn in turn
   if (fadein) {//gradually show
     $element.css ("opacity", 0) .appendto (waterfall. $columns.eq (i%waterfall.column_num)). fadeto (setting.fadein_speed, 1);
   } else {//not gradually
     $element.appendto (waterfall. $columns.eq (i%waterfall.column_num));
   }
  }
  function calculatelowest () {//Calculate the index of the shortest column
   var min=waterfall. $columns.eq (0) .outerheight (), min_key=0;
   waterfall. $columns.each (function (i) {
     if ($(this) .outerheight ()<min) {
      min=$(this) .outerheight ();
      min_key=i;
     }
   });
   return min_key;
  }
  function getelements () {//Get resources
   $.waterfall.load_index ++;
   return setting.getresource ($. waterfall.load_index, public_render);
  }
  waterfall._scrolltimer=null;//Delayed scroll loading timer
  function onscroll () {//Scroll loading
   cleartimeout (waterfall._scrolltimer);
   waterfall._scrolltimer=settimeout (function () {
     var $lowest_column=waterfall. $columns.eq (calculatelowest ());//The shortest column
     var bottom=$lowest_column.offset (). top + $lowest_column.outerheight ();//The distance from the bottom of the shortest column to the top of the browser window
     var scrolltop=document.documentelement.scrolltop || document.body.scrolltop || 0;//Scroll bar distance
     var windowheight=document.documentelement.clientheight || document.body.clientheight || 0;//Window height
     if (scrolltop>= bottom-windowheight) {
       render (getelements (), true);
     }
   }, 100);
  }
  function onresize () {//Rearrange when the window is scaled
   if (calculatecolumns () == waterfall.column_num) return;//The number of columns has not changed,No need to rearrange
   var $cells=waterfall. $waterfall.find (setting.cell_selector);
   waterfall. $columns.remove ();
   waterfall. $columns=creatcolumn ();
   render ($cells, false);//Forcibly do not fade when rearranging existing elements
  }
}) (jquery);

Okay, all done.

Share it with everyone

<! Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fixed-width jquery + ajax + json waterfall flow layout (each line of code has detailed comments)</title>
<style type="text/css">
body, ul, li, h3 {margin:0;padding:0;list-style:none;font:bold 12px "Microsoft Yahei";}
/* Waterfall layout style * /
#lxf-box {position:relative;width:1000px;margin:0 auto;}
#lxf-box li {background:#fff;border:solid 1px #ccc;text-align:center;padding:10px;float:left;}
h3 {padding-top:8px;}
img {width:200px;height:auto;display:block;border:0}
/* css3 animation Note Compatibility is not guaranteed because it is made by css3. For compatibility, please make your own gif animation loading map * /
/* li {-webkit-transition:all .7s ease-out .1s;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out .1s;transition:all .7s ease -out .1s} * /
#loading {display:none;line-height:30px;background:#000;color:#fff;text-align:center;height:30px;width:100%;position:fixed;bottom:0;opacity:0.8;}
</style>
<script src="/templets/niu/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1 color="red">Preview has no effect, please refresh</h1>
<ul>
 <li><a href="div_css/342.html"><img src="/uploads/allimg/120814/1-120q411544tx.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/ajax/237.html"><img src="/uploads/allimg/120801/1-120p1223013157.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/js_ad/271.html /"<img src="/uploads/allimg/120808/1-120pp00915a2.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/js_texiao/312.html /"<img src="/uploads/allimg/120812/1-120q2150022g8.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/js_pic/191.html /"<img src="/uploads/allimg/120722/1-120h2144003129.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/js_pic/318.html /"<img src="/uploads/allimg/120812/1-120q2161941b2.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/div_css/341.html /"<img src="/uploads/allimg/120814/1-120q4113240u2.jpg"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/div_css/350.html /"<img src="/uploads/allimg/120814/125411k11-2.png"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/div_css/350.html /"<img src="/uploads/allimg/120814/1254113249-12.png"></a>
  <h3>Picture Title</h3>
 </li>
 <li><a href="/div_css/349.html /"<img src="/uploads/allimg/120814/12500a292-1.png"></a>
  <h3>Picture Title</h3>
 </li>
 <li>img src="/uploads/allimg/120813/1-120q3145u0938.jpg">
  <h3>Picture Title</h3>
 </li>
 <li><a href="/div_css/344.html /"<img src="/uploads/allimg/120814/12353b521-0.jpg"></a>
  <h3>Picture Title</h3>
 </li>
</ul>
<div>loading ...</div>
<script>
/*
Principle:1. Put all the height values ​​of li into the array
   2. The top of the first line is 0
   3. Calculate which li is the smallest value
   4. Put the next li under that li
Compiled:June 9, 2012
* /
function iiwnet () {//Defined as a function for easy calling
var wrap=document.getelementbyid ("lxf-box")
var margin=10;//Set the margin here
var li=$("li");//here is the block name
var li_w=li [0] .offsetwidth + margin;//take the actual width of the block (including the spacing,The source offsetwidth function is used here. The width () function of jquery is not applicable because it cannot obtain the actual width.
For example, pandding is not allowed in the element)
var h=[];//Array of record block height
  li.css ("position", "absolute");
  var n=wrap.offsetwidth/li_w | 0;//The width of the container divided by the block width is how many blocks can be placed in a row
  for (var i=0;i<li.length;i ++) {//loop as many times as there are li
    li_h=li [i] .offsetheight;//Get the height of each li
    if (i<n) {//n is the most li in one line, so less than n is the first line
      h [i]=li_h;//put each li in the array
      li.eq (i) .css ("top", 0);//The top value of li in the first line is 0
      li.eq (i) .css ("left", i * li_w);//The left coordinate of the i-th li is the width of i * li
      }
    else {
      min_h=math.min.apply (null, h);//Get the minimum value in the array,The one with the smallest height value in the block
      minkey=getarraykey (h, min_h);//The pointer corresponding to the smallest value
      h [minkey] +=li_h + margin;//Update height value after adding new height
      li.eq (i) .css ("top", min_h + margin);//First get the smallest li, and then place the next li below it
      li.eq (i) .css ("left", minkey * li_w);//The left coordinate of the i-th li is the width of i * li
    }
    $("h3"). eq (i) .text ("Number:" + i + ", height:" + li_h);//Write the block serial number and its height value into the corresponding block h3 header
    $("li"). animate ({opacity:1});
  }
}
/* Use the for in operation to return the corresponding number of items in a value in the array (such as calculating the smallest height value is the number in the array) * /
function getarraykey (s, v) {for (k in s) {if (s [k] == v) {return k;}}}
/* Be sure to use onload here, because you do n’t know the height value until the image is loaded.
window.onload=function () {iiwnet ();};
/* Run the function when the browser window changes * /
window.onresize=function () {iiwnet ();};
/************************************************* ********************* /
/* Infinite loading * /
var i=1;
function getmore () {
  $("#loading"). show ();
    $.getjson (json, function (data) {
        $.each (data, function (i) {
        var url=data [i] .url;
      $("#lxf-box"). append (html);
          $("#loading"). hide ();
        });
        iiwnet ();
        i=1
    });
  };
  /* When scrolling to the bottom * /
   $(window) .bind ("scroll", function () {
  if ($(document) .scrolltop () + $(window) .height ()>$(document) .height ()-10&&i == 1) {
    i=0;
    getmore ();
    }
   });
</script>
</body>
</html>