代码之家 › 专栏 › 技术社区 › judehall

CSS大网格问题

css-grid css3 css javascript

-2

judehall · 技术社区 · 6 年前

我正在使用CSS网格绘制时间线。网格正在生成大约1300个div,这对性能非常不利。

我需要让每个单元格都可以点击,并在悬停时显示不同的颜色。我找不到任何方式来设计“空”节点的样式,或者在不呈现所有1300个div的情况下与它们交互。

我能做什么?

< /a>

我能做什么?

2 回复 | 直到 6 年前

1

Ercan Peker 6 年前

作为 Mike 'Pomax' Kamermans 建议最好的方法是检测鼠标点击并动态添加项目。可以通过将值赋给自定义项的宽度和高度 item_width 和 item_height .

var item_width=40;
var item_height=40;
var added_items=[];
$(function(){
      $('.grid').on('click', function(e){
      var x = e.pageX - $(this).offset().left;
      var y = e.pageY - $(this).offset().top; 
      var item=$('<div class="item"></div>');
      var left=Math.floor(x/item_width)*item_width;
      var top=Math.floor(y/item_height)*item_height;
      var position={ 'left':left, 'top':top };
      var index=added_items.findIndex(p => p.left == position.left && p.top == position.top);
      if(index<0){
      added_items.push(position);
      item.css('left', left);
      item.css('top', top);
      item.css('background', "#"+((1<<24)*Math.random()|0).toString(16))
      item.appendTo($('.grid'));
      }
    });
  
});

.grid {
  
  width:400px;
  height:400px;
  border:1px solid red;
    position:relative;
  margin:10px;
}
.item {
  width:40px;
  height:40px;
  position:absolute;
  background:red;  
}
.item:hover { 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"> </div>

2

-1

Mert Cengiz 6 年前

您可以将列类添加到事件处理程序中,而相同的类执行相同的悬停或单击。另外,1300个div确实会降低页面的性能。为此,你可以研究无限卷轴或类似的方法。

https://demos.telerik.com/kendo-ui/grid/endless-scrolling-local