javascript - wookmark 修改和 li 并排和在彼此之下

标签 javascript jquery html css

我正在为我的元素使用 wookmark 插件,当 V 滚动条到达底部时我需要加载更多元素。 插件网址:http://www.wookmark.com/jquery-plugin 我使用的滚动功能:

function _scroll() {
    var v = false;
    $(document).scroll(function(e) {
        var t = document.height - (window.pageYOffset + window.innerHeight);
        if ((t <= 20) && ( !v)) {
            v = true;
            $.ajax({ type:"POST",
            data: {type:$("#type").val(),id:$("#pid").val(),lid:$("#lid").val()},
            async:true,
            cache:false,
            url:"fetchMore.php?v=18",
            success: function(d) {
                var t = d.split('{@}');
                if (parseInt($("#lid").val()) != t[1]) { 
                    $("#tiles").append(t[0]);
                    $("#lid").val(t[1]);
                    applyLayout();
                }
                v = false;
            } });
        }
    });
}

和 applylayout 函数:

function applyLayout() {
          $('#tiles').imagesLoaded(function() {
            // Destroy the old handler
            if ($handler.wookmarkInstance) {
              $handler.wookmarkInstance.clear();
            }
            $handler = $('#tiles li');
            $handler.wookmark(options);
          });
}

最后是我的选项和排序功能:

function comparatorId(a, b) {
          return $(a).attr("id") > $(b).attr("id") ? -1 : 1;
        }
function _Animate() {
     $('#tiles').imagesLoaded(function() {
          options = {
          autoResize: true,
          container: $('#main'),
          offset: 2,
          itemWidth: 210,
          comparator: comparatorId,
          direction: 'right',
          fillEmptySpace: false
        };
        $handler = $('#tiles li');
        $handler.wookmark(options);
      });
}

问题是: 当我要加载更多元素时,元素会随机重新排序,就像没有 comparatorId 函数一样。 有什么解决办法吗? 如果没有解决办法.. 我怎样才能做一个像这样的布局的 ul li 标签? 我可以将它们并排放置,但我希望它们并排放置 + 并排放置

最佳答案

我已经解决了这个问题.. 只需为 li 放置 data-id="{ID}"标签并删除所有类

关于javascript - wookmark 修改和 li 并排和在彼此之下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19033059/

相关文章:

javascript - 来自文档或下一个静态父级的事件委托(delegate)

jquery - Fullpage.js 和移动设备 : How to enable section/slide switch if content overflow must be enabled?

javascript - MeteorJS 模板不显示数据,不出现

php - 通过 Web 表单将数据插入数据库

javascript - 是否有 IE 渲染完成事件?

javascript - SVGforeignObject文本未出现在移动浏览器中

javascript - $http get 循环将响应数据追加在一起

javascript - 保存对象的两种方式,有什么区别?

jquery - 如何将div设置为视口(viewport)的百分比?

javascript - 如何通过多种方式获取 CheckBox 的 Text 和 Value?