VUE 组件里使用定时器自动刷新数据

使用 window.setInterval()

  <div class="hello">
    <h2>Count: {{count}}</h2>

import axios from "axios";

export default {
  name: "HelloWorld",
  props: {
    msg: String

  data() {
    return {
      count: 0

  created() {
    this.timer = setInterval(this.getRandomNumber, 5000);

  methods: {
    getRandomNumber() {
        .get("", {
          params: {
            per_page: 1
        .then(response => {
          // handle success
          this.count = Math.floor(Math.random() * 10);
        .catch(error => {
          // handle error
          this.count = 0;

    cancelAutoUpdate: () => {

  beforeDestroy() {

FlexSlider 从这里开始

Step 1 – Link files

Add these items to theof your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src=""></script>
<script src="jquery.flexslider.js"></script>

 Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
      <img src="slide1.jpg" />
      <img src="slide2.jpg" />
      <img src="slide3.jpg" />

 Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {

…and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 – Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.

namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "fade",              //String: Select your animation type, "fade" or "slide"
easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal",        //String: Select the sliding direction, "horizontal" or "vertical"
reverse: false,                 //{NEW} Boolean: Reverse the animation direction
animationLoop: true,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: false,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
startAt: 0,                     //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600,            //Integer: Set the speed of animations, in milliseconds
initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false,               //Boolean: Randomize slide order

// Usability features
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches

// Primary Controls
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous",           //String: Set the text for the "previous" directionNav item
nextText: "Next",               //String: Set the text for the "next" directionNav item

// Secondary Navigation
keyboard: true,                 //Boolean: Allow slider navigating via keyboard left/right keys
multipleKeyboard: false,        //{NEW} Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
mousewheel: false,              //{UPDATED} Boolean: Requires jquery.mousewheel.js ( - Allows slider navigating via mousewheel
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item

// Special properties
controlsContainer: "",          //{UPDATED} Selector: USE CLASS SELECTOR. Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be ".flexslider-container". Property is ignored if given element is not found.
manualControls: "",             //Selector: Declare custom control navigation. Examples would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

// Carousel Options
itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
// Callback API
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
removed: function(){}           //{NEW} Callback: function(slider) - Fires after a slide is removed





1. CSS Resets

网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的,里面包含一点响应式图片和所有核心元素的边界框设置,这样就可以保持页边距和填充可以很好地对齐。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p { font-size: 1.2em; line-height: 1.0em; color: #333; }

2.经典的CSS Clearfix


.clearfix:after { content: "."; display: block; clear: both; visibility:hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


在表现上,新版本和经典版本不存在什么差异,这些类可以有效地清除所有floats,但它们只兼容现代浏览器和传统的IE 6-8。

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

4. Cross-Browser Transparency


.transparent {
    filter: alpha(opacity=50);
/* internet explorer */
    -khtml-opacity: 0.5;     
/* khtml, old safari */
    -moz-opacity: 0.5;      
/* mozilla, netscape */
    opacity: 0.5;          
/* fx, safari, opera */


5. CSS Blockquote模板


blockquote {
    background: #f9f9f9;<
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
blockquote:before {
    color: #ccc;
    content: open-quote; 
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
blockquote p {
    display: inline;


6. 个性化的圆角代码


#container {
    -webkit-border-radius: 4px 3px 6px 10px;
    -moz-border-radius: 4px 3px 6px 10px;
    -o-border-radius: 4px 3px 6px 10px; 
    border-radius: 4px 3px 6px 10px;
/* alternative syntax broken into each line */
#container {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-rightright-radius: 3px;
    -webkit-border-bottom-rightright-radius: 6px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 10px;

7. 一般媒体查询


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) { 

/* Styles */
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

/* Styles */
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

/* Styles */
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* Styles */
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

/* Styles */
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

/* Styles */
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

/* Styles */


8. 现代字体栈

在新网页上设计属于自己的字体栈还是件比较困难的事情,希望下面这段代码能给你带来启发和开发模板,关于更多字体栈源码,你可以访问CSS Font Stacks

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 

/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 

/*A more traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 

/*The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 

/*The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 

/*The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 

/*The heavier “Impact” sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal,"Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 

/*The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;


9. 自定义文本选择

一些新的Web浏览器允许你在网页上自定义一些突出显示的颜色,下面代码的默认颜色是浅蓝色,当然,你可以依据个人爱好进行各种颜色设置。下面代码引用了典型的Webkit和Mozilla供应商前缀::selection 。

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }


h1 {
    margin0 auto;
    backgroundtransparent url("images/logo.png"no-repeat scroll;

11. 为图片创建拍立得效果边框


img.polaroid {
/*Change this to a background image or remove*/
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333;
/* Standard blur at 5px. Increase for more depth *

-webkit-box-shadow:1px 1px 5px #333;

-moz-box-shadow:1px 1px 5px #333;

height:200px; /*Set to height of your image or desired div*/
/*Set to width of your image or desired div*/


12. 锚链接伪类选择器

a:link { colorblue; }
a:visited { colorpurple; }
a:hover { colorred; }
a:active { color: yellow; }


13. 花俏地CSS3 Pull-Quotes


.has-pullquote:before {

/* Reset metrics. */
    padding: 0;
    border: none; 

/* Content */
    content: attr(data-pullquote);

/* Pull out to the right, modular scale based margins. */
    float: rightright;
    width: 320px;
    margin: 12px -140px 24px 36px;

/* Baseline correction */
    position: relative;
    top: 5px;

/* Typography (30px line-height equals 25% incremental leading) */
    font-size: 23px;
    line-height: 30px;
.pullquote-adelle:before {
    font-family: "adelle-1", "adelle-2";
    font-weight: 100;
    top: 10px !important;

.pullquote-helvetica:before {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;
.pullquote-facit:before {
    font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
    font-weight: bold;
    top: 7px !important;


14. CSS3的全屏背景效果


html {
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


15. 内容垂直集中


.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;


16. 垂直滚动条


html { height101% }

17. CSS3 Gradients模板

#colorbox {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
    background-image: -webkit-linear-gradient(top, #83b842, #629721);
    background-image: -moz-linear-gradient(top, #83b842, #629721);
    background-image: -ms-linear-gradient(top, #83b842, #629721);
    background-image: -o-linear-gradient(top, #83b842, #629721);
    background-image: linear-gradient(top, #83b842, #629721);

18. @Font-Face模板

使用@font-face可以把TTF/OTF/SVG/WOFF文件嵌入到网站,并生成自定义font families。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
/* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
    url('webfont.woff') format('woff'),
/* Modern Browsers */
    url('webfont.ttf')  format('truetype'),
/* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
body {
    font-family: 'MyWebFont', Arial, sans-serif;




p {
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottombottom: 3px;
    left :3px;
    rightright: 3px;
    border: 2px dashed #fff;
p a {
    color: #fff;
p a:hover, p a:focus, p a:active {

20. CSS3 斑马线效果


tbody tr:nth-child(odd) {



让 jQuery Datepicker 兼容 WordPress 和 WPML


        $.datepicker.regional['zh-hans'] = $.datepicker.regional['zh_CN'] = {
                closeText: '关闭',
                prevText: '&#x3c;上月',
                nextText: '下月&#x3e;',
                currentText: '今天',
                monthNames: ['一月','二月','三月','四月','五月','六月',
                monthNamesShort: ['一','二','三','四','五','六',
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
                dayNamesMin: ['日','一','二','三','四','五','六'],
                weekHeader: '周',
                dateFormat: 'yy-mm-dd',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'};
        $.datepicker.setDefaults( $.datepicker.regional[ "<?php echo defined('ICL_LANGUAGE_CODE')?ICL_LANGUAGE_CODE:WPLANG;?>" ] );

最后一行,这儿由于 WPML 和 WORDPRESS 的语言静态变量不一样,值也不同,需要判断然后输出,输出的值可能是 zh-hans,或 zh_CN,所以在第一行声明了两个变量来存储翻译。


caroufredsel 的配置页面里提到 swipe 这个属性:To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.

如果 HTML 结构是这样

<div class="image_carousel">
<ul id="carousel">
   <li><img src="slier.jpg"/><li>
   <li><img src="slider2.jpg"/><li>


        auto        : false,
	prev        : '#c-prev',
	next        : '#c-next',
        swipe       : {
                onTouch     : true,
                onMouse     : true


<ul id="carousel">
   <li><a href="foo.html"><img src="kitten.jpg"/></a><li>
   <li><a href="foo.html"><img src="puppy.jpg"/></a><li>


这是因为 这个插件将一些元素排除了,查看代码可以发现:

excludedElements:"label, button, input, select, textarea, a, .noSwipe"

所以在处理带连接的情况,就需要重置一下 excludedElements, 例如:

    	auto : false,
        items: 1,
        swipe       : {
            onTouch         : true,
            onMouse         : true,
            options         : {
                excludedElements: "button, input, select, textarea, .noSwipe"
	    prev : "#foo1_prev",
	    next : "#foo1_next"


还有另一个另一个jquery 插件,jQuery Touchwipe Plugin



        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true

        wipeLeft: function() {
            $('#carousel').trigger('next', 1);
        wipeRight: function() {
            $('#carousel').trigger('prev', 1);

这样就可以了,但是至于 touchSwipe 如何支持链接,一时还找不到方法。

How to fix position absolute z-index bug in IE7

正常的我们做下拉菜单 和 幻灯片重叠在一起的时候,使用 z-index 就可以解决问题,正常的效果应该是这样:


但是天杀的 IE7 却是这样:


这时候任凭你怎么使用 position 和 z-index 都不会起作用!

可以到google搜索 ie7 position absolute z-index




这两个层的 z-index 的值大设置并没有多大关系,只要按照显示在上面的数字越大就可以了。

下面我们找到 mega menu 的根层 #header,给她家上两个css属性 {position: relative;z-index: 10;}

在找到 幻灯片 所在层的根层 #page ,加上 css 属性 {position: relative;z-index: 1;}

保存,测试,看看是不是在IE7 里也正常了。

无聊的可以拿下面的代码中各个浏览器里面试试,定能发现其中的奥妙,至于这是IE7 的什么bug,那就不管了~

.parent{width:200px; height:200px; padding:10px;}   .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}   .lt50{left:50px;top:50px;}
<div style="height:500px">
	<div style="position: relative; z-index: 10;">
		<div class="parent" style="position: absolute; background: lightgrey;">
			<div class="sub" style="position: absolute; z-index: 20; background: darkgray;">20</div>
			<div class="sub lt50" style="position: absolute; z-index: 10; background: dimgray;">10</div>
	<div style="position: relative; z-index: 1;">
		<div class="parent" style="position: absolute; left: 80px; top: 80px; background: black;">
			<div class="sub" style="position: absolute; z-index: 4; background: darkgray;">2</div>
			<div class="sub lt50" style="position: absolute; z-index: 2; background: dimgray;">1</div>




Backstretch Errot: has no method ‘backstretch’

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

Uncaught TypeError: Object function (e,t){return new v.fn.init(e,t,n)} has no method ‘backstretch’

maybe many guys got this error

Maybe the issue is ’cause you put $.backstretch([“bg.jpg”]);   ahead of jquery.backstretch.js plugin, try switch the postion.

jQuery 向上弹出式菜单

Slide Up Menu / jQuery 向上弹出式菜单

The jQuery Slide Up Menu it’s a good alternative to other existing menus giving the possibility to position the menu on the bottom of your header image or at the bottom of the window, acting like Windows Start Menu. You can let it behave like a normal menu or you can add HTML code inside and put whatever you want inthere

jQuery的向上滑动菜单,这是一个很好的替代现有的可能定位在你的头部图像的下面或在窗口底部的菜单上,就像Windows的“开始”菜单的菜单。 你可以把它像一个普通的菜单, 或者你可以添加HTML代码或者任何你想要的放里面。

Options / 设置

slideUpSpeed / 上弹速度

Number of milliseconds to slide up the submenu items Default: 500

slideDownSpeed / 回收速度

Number of milliseconds to slide down the submenu items Default: 500


Ease animation effect Default: easeInOutCubic (supported without jquery.ease plugin)

Use false to remove the animation ease.
To use any other animation pls use the jQuery Easing Plugin

stopQueue / 停止动画队列

Stop or continue animation on event change Default: true 

Stopping the queue animation will provide a faster visual feedback when sliding trough the menu items although the effects may appear snappier. Using stopQueue false you may get animations executing long after you hovered the item (if the user will rapidly and repeatedly hover the mouse over the menu items).

Usage / 怎么使用

HTML HEAD code / Html 头部调用的代码

<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script> //if needed
<script type="text/javascript" src=""></script>

HTML BODY code / html 菜单的代码

<div class="top-menu">
<ul class="top-menu-main">
  <li class="first">
    <ul class="top-submenu">
      <li class="first">Subitem 1.0</li>
      <li class="">Subitem 1.1</li>
      <li class="">Subitem 1.2</li>
      <li class="">Subitem 1.3</li>
      <li class="last">Subitem 1.4</li>
    <a href="#" class="menu-item-text">Item 1</a>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 2.0</li>
      <li class="">Subitem 2.1</li>
      <li class="last">Subitem 2.2</li>
    <a href="#" class="menu-item-text">Item 2</a>
  <li class="">
    <ul class="top-submenu">
      <li class="first">Subitem 3.0</li>
      <li class="last">Subitem 3.1</li>
    <a href="#" class="menu-item-text">Item 3</a>

Javascript code / 执行代码

var opts = {slideUpSpeed:500, slideDownSpeed: 200};


WordPress Portfolio work with Isotope and Infinite Scroll


  1. Isotope: 神奇的布局精致的jQuery插件。演示
  2. Infinite Scroll:无限滚动被称为autopagerize的,unpaginate,无尽的网页。但实质上,它是预取从随后出现的页面上的内容,并直接将其添加到用户的当前页面。 演示

新建文章类型 portfolio 和 Portfolio 分类 

 function my_post_types() {
        register_post_type('portfolio', array(
            'label' => __('Portfolio','itc'),
            'singular_label' => __('Portfolio', 'itc'),
            '_builtin' => false,
            //'exclude_from_search' => false, // Exclude from Search Results
            'capability_type' => 'post',
            'public' => true,
            'show_ui' => true,
            'show_in_nav_menus' => FALSE,
            'menu_position' => 100,
            'rewrite' => array(
                'slug' => 'portfolio-show',
                'with_front' => FALSE,
            'query_var' => true,
            'supports' => array(

        register_taxonomy('portfolio_category', array('portfolio', 'solution', 'service'), array(
            'hierarchical' => true,
            'labels' => array(
                'name' => __('Portfolio Category', 'itc'),
                'singular_name' => __('Portfolio Category', 'itc'),
                'search_items' => __('Search Portfolio Category', 'itc'),
                'all_items' => __('All Portfolio Category', 'itc'),
                'parent_item' => __('Parent Portfolio Category', 'itc'),
                'parent_item_colon' => __('Parent Portfolio Category:', 'itc'),
                'edit_item' => __('Edit Portfolio Category', 'itc'),
                'update_item' => __('Update Portfolio Category', 'itc'),
                'add_new_item' => __('Add New Portfolio Category', 'itc'),
                'new_item_name' => __('New Portfolio Category Name', 'itc'),
                'menu_name' => __('Portfolio Category', 'itc'),
            'show_ui' => true,
            'query_var' => true,
            'rewrite' => array('slug' => 'service-view'),
 add_action('init', 'my_post_types');



创建页面模板 page-portfolio.php


 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar


新建 portfolio 页面

页面-》新建页面; 注意在右边页面属性-> 模板 里选择 portfolio. ok, portfolio 页面建成了,打开预览。神马?空白!别急,还没完成。

引入jQuery 插件 Isotope and Infinite Scroll

编辑 page-portfolio.php

 * Template Name: Portfolio
 * Description: A full-width Portfolio template with no sidebar
$taxonomy = 'portfolio_category';
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.isotope.min.js'></script>
<script type='text/javascript' src='<?php bloginfo('template_url') ?>/js/jquery.infinitescroll.min.js'></script>

前提:在 get_header() 已经调用了 jQuery ;jquery.isotope.min.js 和 jquery.infinitescroll.min.js 已经保存到主题文件夹里的 js 文件夹里。

建立 Portfolio 的 Filters

            <div id="options" class="page-title clearfix">
                <h1><?php the_title() ?></h1>
        $all_portfolio_category = get_terms($taxonomy);
        $count_portfolio_category = count($all_portfolio_category);
        if ($count_portfolio_category > 0) {
            echo '<ul class="tags option-set" id="filters" data-option-key="filter">';
            echo '<li><a href="#filter" data-option-value="*" class="selected" title="All"><span><img src="<?php bloginfo('template_url') ?>/images/all.png" alt="Hosting"></span></li>';
            foreach ($all_portfolio_category as $term) {
                echo '<li><a href="#filter" data-option-value=".' . $term->slug . '" title="' . $term->name . '"><span><img src=' . z_taxonomy_image_url($term->term_id) . ' alt="' . $term->name . '" ></span></a></li>';
            echo '</ul>';

分页形式列出 portfolioes

           <div id="project_show" class="clearfix">
    'post_type' => 'portfolio',                    
    'posts_per_page' => 9,
    'is_paged' => TRUE, 
    'paged' => max(1, get_query_var('paged'))));
 while ( have_posts()) :  the_post();
$portfolio_terms = get_the_terms(get_the_ID(), $taxonomy );
if ( $portfolio_terms &#038;& ! is_wp_error( $portfolio_terms ) ) : 

	$data_category = array();

	foreach ( $portfolio_terms as $portfolio_term ) {
		$data_category[] = $portfolio_term->slug;
	$data_categories = join( " ", $data_category );

                <div class="element one_third <?php echo $data_categories;?>" data-symbol="<?php the_title()?>" data-category="<?php echo $data_categories;?>">
                    <div class="third_wrap">
                        <div class="project clearfix">


 <?php toolbox_content_nav('nav-below'); ?>   

Js 实例

      var $container = $('#project_show');

        itemSelector : '.element'
        navSelector  : '.nav-previous',    // selector for the paged navigation 
        nextSelector : '.nav-previous a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more projects to load.',
            img: ''
        // call Isotope as a callback
        function( newElements ) {
          $container.isotope( 'appended', $( newElements ) ); 
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');

        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        var $optionSet = $this.parents('.option-set');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' &#038;& typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        return false;


到这儿工作就基本上完成了,去试试,已经有效果的,但是并没有人家那么梦幻,是因为支持动画的 CSS 还没有引入。

将下面的CSS加入到 style.css 里,或者独立调用也行。

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;

/**** Isotope CSS3 transitions ****/

.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;

/**** disabling Isotope CSS3 transitions ****/, .isotope-item,
.isotope {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;

/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;

/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
body {
  height: 100%;

.element {
  width: 320px;
  height: 220px;
  float: left;
  overflow: hidden;
  position: relative;

/**** Example Options ****/

#options li a:hover {
  background-color: #0081cc;

#options li a:active {
  background-color: #0085d6;

#options li a.selected {
  background-color: #0085d6;

/* Combination filter options*/

#options .option-combo {
  display: inline-block;
  float: left;
  margin-right: 10px;

#options .option-combo ul {
  margin-right: 20px;
  display: inline-block;

#options .option-combo h2,
#options .option-combo h4 {
  line-height: 34px;
  margin-bottom: 0;
  margin-right: 5px;
  display: inline-block;
  vertical-align: top;

/**** Infinite Scroll ****/

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 30px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;