Home > Developer > Web Develop
Maonsry+infinite-scroll implement scrolling paging, there are many online, here only said:
A basic use of waterfall stream plug-in, with the basic function of the demo
<HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Jquery.masonry's Run-through demo</title><Scripttype= "Text/javascript"src= "Http://i.tq121.com.cn/j/jquery-1.8.2.js"></Script><Scriptsrc= "Http://i.tq121.com.cn/j/plugs/jquery.masonry.min.js"></Script><style>Div Div{background:Red;width:100px;margin:10px;Color:#fff;padding:10px;}</style></Head><Body><DivID= "Container"> <Divclass= "Item"style= "width:100px">A A A A a a AA a a a a a AA a a a a AA a a a a AA a A a A a a a a a AA a A a a a a a AA a A a A a a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A A A a a a a a a a a a a a a a a a a a a a a a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A A A a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A a a a A</Div> <Divclass= "Item"style= "width:100px">A A A A a a AA a a a a a AA a a a a AA a a a a AA a A a A a a a a a AA a A a a a a a AA a A a A a a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A A A a a a a a a a a a a a a a a a a a a a a a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A A A a a a a a a A</Div> <Divclass= "Item"style= "width:100px">A A a a a A</Div></Div><Scripttype= "Text/javascript"> $(function(){ $('#container'). Masonry ({//Options Settings OptionItemselector:'. Item',//class SelectorColumnWidth: - ,//width of one column Integerisanimated:true,//use jquery for layout change Booleananimationoptions:{//jquery Animate Property Gradient effect Object {queue:false, duration:500}}, Gutterwidth:0,//Gap Integer for columnIsfitwidth:true,//Fit to width BooleanIsresizablel:true,//whether the size can be resized BooleanIsrtl:false,//use right-to-left layout Boolean });});</Script></Body></HTML>
First introduced in the page
<script src= "Jquery-1.7.1.min.js" ></script>
<script src= "Jquery.masonry.min.js" ></script>
<script src= "Jquery.infinitescroll.js" ></script>
Arrange the contents of the body:
<BODY> <div id= "Container" >
<div class= "Item" >a a a A a a</div>
<div class= "Item" >a a a A a a</div>
<div class= "Item" >a a a A a a</div>
<div class= "Item" >a a a A a a</div>
</div>
</BODY>
To invoke the plugin in JS:
<script type= "Text/javascript" >
$ (function () {
$ (' #container '). Masonry ({
Options settings option
Itemselector: '. Item ',//class selector
columnwidth:240,//width of a column Integer
isanimated:true,//use jquery for layout change Boolean
animationoptions:{
JQuery Animate Property Gradient effect Object {queue:false, duration:500}
},
Gap Integer for gutterwidth:0,//column
isfitwidth:true,//Fit Width Boolean
isresizablel:true,//whether the size is resizable Boolean
isrtl:false,//using right-to-left layout Boolean
});
});
</script>
When you need to arrange the picture div:
Need to call:
<script>
var $container = $ (' #container ');
$container. imagesloaded (function () {
$container. Masonry ({
Itemselector: '. Item ',
columnwidth:240
});
});
</script>
The method format for calling the masonry plug-in is: $ (' #container '). Masonry (' MethodName ', [optionalparameters])
For example:
. Masonry (' appended ', $content, Isanimatedfrombottom)//trigger the cloth added to the container project
Masonry (' destroy ')//completely remove the function of masonry to return to the pre-initialized state of the element
. Masonry (' layout ', $items, callback)//Specify the layout of the project
. Masonry (' option ', options)//SET option
. Masonry (' reloaditems ')//re-aggregate all items in the current order
. Masonry (' reload ')//for pre-consideration or insertion of the project. Masonry (' Reloaditems ') simplified version
. Masonry (' Remove ', $items)//Remove project from masonry instance or DOM
Call the Infinitescroll plugin:
$container. Infinitescroll ({
Navselector: ' #page-nav ',//selector for pager
Nextselector: ' #page-nav a ',//next page Connected Selector
Itemselector: '. Box ',//selector for all items you want to retrieve
Loading: {
Finishedmsg: ' No more pages to load. ',//End Display information
IMG: ' http://i.imgur.com/6RMhx.gif '//loading pictures
}
},
Triggering masonry as a callback function
function (newelements) {
Hide all new items when loading
var $newElems = $ (newelements). css ({opacity:0});
Ensure picture loading before adding to masonry layout
$newElems. imagesloaded (function () {
Now we can show all the elements.
$newElems. Animate ({opacity:1});
$container. Masonry (' appended ', $newElems, true);
});
}
);
Waterfall Stream Plugin |jquery.masonry| using demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
