调整大小时的动态 Flex 项目

Question

这里是新的 Web 开发人员，如果可能，仅使用纯 JS 构建日历。

截至目前：https://jsfiddle.net/q7h3fm9c/，我只知道在溢出时包装元素，如何以响应方式 'destroy' 和 'create' 新节点，以便有只有 1 行具有最佳节点数？这是手动创建节点的位：

for(var i = 0; i < 4; i++) addNewDayObject(i, "lel", "lel", 2015)

我在尝试使用谷歌搜索解决方案时遇到了媒体查询，但是我非常不希望对宽度值进行硬编码以触发代码，因为弹性项目将具有动态宽度。

Answer 1

如果您只需要'hiding'连续的行，您可以将容器的高度元素div设置为只显示一行。只要高度固定，这应该可以工作。

请看我的fiddlehere.

CSS

#dayObjContainer {
    max-height: 124px; /* max height here*/
    overflow: hidden;
    padding-bottom: 5px;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
}
.dayObj {
    padding: 10px 0px;
    width: 250px;
    color: #FFF5AA;
    background-color: #D4C96A;
    text-align: center;
    margin: 0px 5px 5px; /* added bottom margin here */
    box-shadow: 2px 2px 5px #888888;
}

Answer 2

我发现了window.onresize，一切都解决了。 javascript + 浏览器是否有列出所有可供我使用的方法和属性的文档？猜测和 google 让我的学习速度变慢了 :\

window.onload = init;
var dayObjTemplate;
var containerRef;
var objCount = 0;
function init() {
  dayObjTemplate = document.getElementById("obj0");
  containerRef = dayObjTemplate.parentNode;
  dayObjTemplate.parentNode.removeChild(dayObjTemplate);
  // capture day object template and remove from DOM

  for(var i = 0; i < 1; i++) addNewDayObject(11, 8, 2015)

  window.onresize = function updateNewContainerWidth(argument) {
    var conWdt = containerRef.offsetWidth;
    while(objCount < Math.floor(conWdt / (250+5))) {
      addNewDayObject(11, 8, 2015);
    }
    while(objCount > 1 && objCount > Math.floor(conWdt/(250+5))) {
      removeLastDayObject();
    }
  }
}

function removeLastDayObject() {
  containerRef.removeChild(document.getElementById("obj"+objCount));
  objCount--;
}

function addNewDayObject(day, month, year) {
  var d = new Date(year, month, day);
  var dayNames=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

  objCount++;
  var clone = dayObjTemplate.cloneNode(true);
  clone.id = "obj" + objCount;
  clone.getElementsByClassName("dayObjDayLabel")[0].innerHTML = dayNames[d.getDay() - 1];
  clone.getElementsByClassName("dayObjNumLabel")[0].innerHTML = day;
  clone.getElementsByClassName("dayObjMYLabel")[0].innerHTML = month + ", " + year

  document.getElementById("dayObjContainer").appendChild(clone);
}

请原谅我乱七八糟的代码，希望和我遇到同样问题的人能有所帮助。

调整大小时的动态 Flex 项目

Dynamic Flex Item on resize

javascript

css

dom

calendar

flexbox