Home>
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>
Related articles
- AJAX implementation of waterfall flow triggering pagination and page triggering waterfall flow
- PHP + Jquery combined with ajax to achieve the effect of drop-down and fade-out waterfall [no plugin required]
- Pure js to implement waterfall flow layout and ajax dynamic new data
- Deep learning js waterfall flow layout
- JavaScript waterfall lazy image loading example
- Detailed implementation of JavaScript waterfall layout
- AJAX implements waterfall layout
Trends
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning