Question

我目前正在使用js脚本（tinymasonry）并成功将新项添加到网格中。这些项目具有不透明度0类（op0），在加载时将被删除。

这在初始加载时工作正常，并且在调整所有元素的大小时，但我试图让这种淡入淡出效果也只发生在新的推送元素上。这就是我被卡住的地方。

这是我的代码：

function TinyMasonry(el) {
  var self = this
  var columns = []

  function createColumns(n) {
    var width = 100 / n + "%"
    columns = []
    while (n--) {
      var column = document.createElement("div")
      column.style.width = width
      column.style.float = "left"
      el.appendChild(column)
      columns.push(column)
    }
  }

  function getShortest() {
    var shortest = columns[0]
    for (var i = columns.length; i--;) {
      if (columns[i].clientHeight <= shortest.clientHeight) {
        shortest = columns[i]
      }
    }
    return shortest
  }

  function layout(tested) {
    var width = tested.parentElement.clientWidth / tested.clientWidth
    var n = Math.min(42, Math.round(width)) || 1
    var child
    while (child = el.firstElementChild) {
      child.parentNode.removeChild(child)
    }
    el.style.overflow = "hidden"
    createColumns(n)
    self.items.forEach(function(item,index) {
      item.style.display = "block"
      item.style.width = "auto"
      item.style.visibility = ""
      getShortest().appendChild(item)
      setTimeout(function() {
        item.classList.remove('op0')
      }, (100 * (index + 1)));

    })
    el.style.minHeight = ""
  }

  self.update = function() {
    if (self.items[0]) {
      el.classList.add("tinyMasonryLoaded")
      if (columns[0]) {
        el.style.minHeight = el.clientHeight + "px"
      }
      var tested = self.items[0]
      tested.style.width = ""
      if (tested.parentNode && tested.parentNode.parentNode === el) {
        layout(tested)
      } else {
        el.appendChild(tested)
        setTimeout(layout.bind(0, tested))
      }
    }
  }

  self.items = [].slice.call(el.children)
  self.update()

  var resizer;
  var startWidth = window.innerWidth;

  function resizeTimeout() {
      clearTimeout(resizer);
      resizer = setTimeout(doneResizing, 100)
  } 

  function doneResizing() {
    var curWidth = window.innerWidth;
    var breakpoint = false;
      if ((startWidth >= 580 && curWidth < 580) || (startWidth <= 580 && curWidth > 580)) {
          breakpoint = true
      }
      else if ((startWidth >= 980 && curWidth < 980) || (startWidth <= 980 && curWidth > 980)) {
          breakpoint = true
      }
      if(breakpoint === true) {
          self.items.forEach(function(item,index) {
            item.classList.add('op0')
          })
          self.update()
      }
      startWidth = window.innerWidth;
  }

  window.addEventListener("resize", resizeTimeout)
}

if (typeof exports === "object") {
  module.exports = TinyMasonry
}

var masGridContainer = document.querySelector(".mas-grid");
var masGrid = new TinyMasonry(masGridContainer);

然后在ajax响应中我添加了元素：

for (index = elements.length - 1; index >= 0; --index) {
    masGrid.items.push(elements[index]);
}
masGrid.update();

如果我在更新功能的开头添加循环，例如：

self.items.forEach(function(item,index) {
        item.classList.add('op0')
    })

添加新项目时，不透明度效果会显示在所有项目上。

如果在ajax响应之后调用update（）fun时，如何才能在新添加的项目上显示效果？

Answer 1

解决此问题的一种方法是不添加项目索引，而是添加对象。该对象将具有该项和日期对象。因此，通过比较日期对象，您将能够获得最新的条目。
选项2基本上是创建临时列表并将条目添加到新列表中，然后形成它们的并集以获取公共条目，以便您知道新条目。

eg:

temp List 1 = [1,2]

List 1 = [1,2,3]

所以现在你知道3是新条目。

Answer 2

据我了解您的代码和示例，您只是将通过ajax响应获得的元素推送到网格中。由于push始终将项添加到数组的末尾，因此您只需记住您添加的最后一个索引，例如：

var arr = [1, 2, 3, 'sun', 'banana', 4, 'foo'];
var lastKnownIndex = 4;

// all elements added
var addedElements = arr.slice(lastKnownIndex + 1);

// process added elements
console.log(addedElements);

// update index
lastKnownIndex = arr.length - 1;

请参阅slice。

很遗憾，您没有为您的代码提供HTML / CSS。但是，这是我根据你的文字将它放入你的代码的方式：

function TinyMasonry(el) {
  var self = this
  var columns = []
  var lastKnownIndex = 0

  function createColumns(n) {
    var width = 100 / n + "%"
    columns = []
    while (n--) {
      var column = document.createElement("div")
      column.style.width = width
      column.style.float = "left"
      el.appendChild(column)
      columns.push(column)
    }
  }

  function getShortest() {
    var shortest = columns[0]
    for (var i = columns.length; i--;) {
      if (columns[i].clientHeight <= shortest.clientHeight) {
        shortest = columns[i]
      }
    }
    return shortest
  }

  function layout(tested) {
    var width = tested.parentElement.clientWidth / tested.clientWidth
    var n = Math.min(42, Math.round(width)) || 1
    var child
    while (child = el.firstElementChild) {
      child.parentNode.removeChild(child)
    }
    el.style.overflow = "hidden"
    createColumns(n)
    self.items.forEach(function(item,index) {
      item.style.display = "block"
      item.style.width = "auto"
      item.style.visibility = ""
      getShortest().appendChild(item)
      setTimeout(function() {
        item.classList.remove('op0')
      }, (100 * (index + 1)));

    })
    el.style.minHeight = ""
  }

  self.update = function() {
    // loop from your example, with my logic added
    self.items..slice(lastKnownIndex + 1).forEach(function(item,index) {
          item.classList.add('op0')
    })
  
    if (self.items[0]) {
      el.classList.add("tinyMasonryLoaded")
      if (columns[0]) {
        el.style.minHeight = el.clientHeight + "px"
      }
      var tested = self.items[0]
      tested.style.width = ""
      if (tested.parentNode && tested.parentNode.parentNode === el) {
        layout(tested)
      } else {
        el.appendChild(tested)
        setTimeout(layout.bind(0, tested))
      }
    }
    
    // update index
    lastKnownIndex = self.items.length - 1
  }

  self.items = [].slice.call(el.children)
  self.update()

  var resizer;
  var startWidth = window.innerWidth;

  function resizeTimeout() {
      clearTimeout(resizer);
      resizer = setTimeout(doneResizing, 100)
  } 

  function doneResizing() {
    var curWidth = window.innerWidth;
    var breakpoint = false;
      if ((startWidth >= 580 && curWidth < 580) || (startWidth <= 580 && curWidth > 580)) {
          breakpoint = true
      }
      else if ((startWidth >= 980 && curWidth < 980) || (startWidth <= 980 && curWidth > 980)) {
          breakpoint = true
      }
      if(breakpoint === true) {
          self.items.forEach(function(item,index) {
            item.classList.add('op0')
          })
          self.update()
      }
      startWidth = window.innerWidth;
  }

  window.addEventListener("resize", resizeTimeout)
}

if (typeof exports === "object") {
  module.exports = TinyMasonry
}

var masGridContainer = document.querySelector(".mas-grid");
var masGrid = new TinyMasonry(masGridContainer);

重要部分：

var lastKnownIndex = 0

引入变量来记住顶部的索引。

在更新方法中使用示例循环：

// loop from your example, with my logic added
self.items..slice(lastKnownIndex + 1).forEach(function(item,index) {
      item.classList.add('op0')
})

见上面的例子。

// update index
lastKnownIndex = self.items.length - 1

在更新方法结束时。

仅定位在数组中推送的新添加元素

2 个答案: