Question

新的Web开发人员，尽可能使用纯JS构建日历。

截至目前：https://jsfiddle.net/q7h3fm9c/，我只知道在溢出时包装元素，我如何以响应方式“破坏”和“创建”新节点，以便只有一行具有最佳值节点数量？下面是手动创建节点的位：

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

我在谷歌搜索解决方案时遇到了媒体查询，但是我非常不希望硬编码宽度值来触发代码，因为flex-items将具有动态宽度。

Answer 1

如果只是“隐藏”连续的行是你需要的，你可以设置容器div的height元素只显示一行。只要高度固定，这应该有效。

请看我的小提琴here。

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 +浏览器是否有文档列出了我可以使用的所有方法和属性？ Guesswork和谷歌让我的学习成绩很慢：\

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项目

2 个答案: