无限墙javascript/mootools

我正试图使用以下脚本在wordpress上创建一个无休止的可拖动墙：。 我面临的问题是，我不知道如何抓取wordpress帖子，并将它们插入墙格中

这是初始化墙的代码：

window.addEvent("domready", function(){
  // Define The Wall
                    var maxLength    = 100; // Max Number images
                    var counterFluid = 1;
                    var wallFluid = new Wall("wall", {
                                    "draggable":true,
                                    "inertia":true,
                                    "width":150,
                                    "height":150,
                                    "rangex":[-100,100],
                                    "rangey":[-100,100],
                                    callOnUpdate: function(items){
                                        items.each(function(e, i){
                                            var a = new Element("img[src=/your/folder/images/"+counterFluid+".jpg]");
                                                a.inject(e.node).fade("hide").fade("in");
                                            counterFluid++;
                                            // Reset counter
                                            if( counterFluid > maxLength ) counterFluid = 1;
                                        })
                                    }
                                });
                    // Init Fluid Wall
                    wallFluid.initWall();
});

---

我应该找到一种制作“新元素”的方法，抓取一篇已经存在的wordpress文章，或者使用ajax添加一篇新文章，尽管我认为这会让它变得非常慢。你知道我该怎么做吗？

我想你要做的是设置一个Wordpress查询，通过ajax查询获得你想要的帖子。这些将返回到您的items数组中，而不是示例中的图像。

如果页面基于标准Wordpress结构，我看不到在这里使用AJAX有任何好处。最简单的方法是抓住柱子，把它们放在墙上。因此，如果有多篇文章，这个脚本将创建墙的html元素，设置基本css，获取文章并将其放置在墙内。是以实例为基础的

墙脚本主要用于图像，而不是文本，因为所有元素都是使用固定尺寸绝对定位的（除非立柱长度相似，也可以使用标记固定）

examle在默认主题下使用WP 3.8.1进行测试。为了工作，您需要使用以下脚本：

window.addEvent( "domready", function() {

    if ( $$( '.post' ).length > 1 ) {
        // create base container for the wall
        new Element( 'div#wall_container' ).setStyles({
            width:      608,
            position:   'relative', 
            margin:     '0 auto'    
        }).inject( $$( '.post' )[0], 'before' );

        // create viewport, wall, and navigation 
        new Element( 'div#viewport' ).setStyles({
            width:      608,
            height:     450,
            position:   'relative',
            overflow:   'hidden',
        }).inject( 'wall_container' );

        new Element( 'div#wall' ).inject( 'viewport' );
        new Element( 'div#wall-list' ).inject( 'viewport', 'after' );

        // collect all posts ( elements with class="post" ) and dispose them
        var posts = $$( '.post' ).dispose();

        new Wall( "wall", {
            "draggable":    true,
            "inertia":      true,
            "autoposition": true,
            "preload":      true,
            "width":        608,
            "height":       450,
            "rangex":       [ 0, posts.length ],    // use number of posts for number of items in the wall
            "rangey":       [ 0, 1 ],               // only one line
            callOnUpdate: function( items ) {
                items.each( function(e, i) {                
                    posts[e.y].inject(e.node);      // inject posts into wall
                });
            }
        })  .initWall()
            .getListLinksPoints( "wall-list" );
    }

});