First, the HTML structure
<main id= ' container ' >
<span>View:</span>
<button class= ' view-list ' >List</button>
<button class= ' View-grid ' >Grid</button>
<ol class= ' grid ' id= ' frame ' >
<li class= ' frame ' >
<div class= ' inset ' >
<div class= ' image ' ></div>
<div class= ' info ' >
<div class= ' title ' >lorem ipsum</div>
<div class= ' description ' ></div>
<div class= ' shares ' >
<div class= ' Icon-lik likes ' ></div>
<div class= ' icon-ask comments ' ></div>
</div>
</div>
</div>
</li>
</ol>
</main>
Second, call the plug-in
<link rel= ' stylesheet ' href= ' http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css ' >
<script src= ' http://libs.useso.com/js/jquery/1.11.0/jquery.min.js ' ></script>
<script src= ' http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js ' ></script>
$ (' #header button '). On (' click ', function () {
if ($ (this). Hasclass (' view-list ')) {
$ (' #frame '). Removeclass (' grid '). addclass (' list ');
} else if ($ (this). Hasclass (' View-grid ')) {
$ (' #frame '). Removeclass (' list '). addclass (' grid ');
}
});
$ ('. Frame '). each (function () {
var images = [' 1.jpg ', ' 2.jpg ', ' 3.jpg ', ' 4.jpg ', ' 5.jpg ', ' 6.jpg '];
$ (this). Find ('. Image ')
. css ({' background-image ': ' url (' +images[math.floor (Math.random () *images.length) ']+ ') '});
var like = 100,
Likes = Math.floor (Math.random () * like) + 1;
$ (this). Find ('. Likes '). Text (likes);
var comment = 50,
Comments = Math.floor (Math.random () * comment) + 1;
$ (this). Find ('. Comments '). Text (comments);
});
Keymob Mobile Advertising platform is the most advanced mobile advertising platform for advertisers to provide accurate and efficient app marketing services, for developers to provide the SDK advertising cooperation, to achieve the advertising owners and developers win!
HTML5 Add toggle thumbnail mode and list mode plugin tutorial
