|
|
@@ -27,19 +27,27 @@ class IndicatorView extends React.Component {
|
|
|
let cardCount = cards.length;
|
|
|
let bodyBox = body.getBoundingClientRect();
|
|
|
|
|
|
- let maxColNum = cardCount < 4 ? cardCount : 4; // 列数
|
|
|
+ let maxColNum = cardCount > 4 ? 4 : cardCount; // 列数
|
|
|
let maxRowNum = Math.ceil(cardCount / maxColNum); // 行数
|
|
|
let cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
let inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
- let cardWidth = (bodyBox.width - (inScroll ? 18 : 0)) / maxColNum - (inScroll ? 8 : 11);
|
|
|
+ let cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
while(cardWidth < 180 && maxColNum > 1) {
|
|
|
maxColNum--;
|
|
|
maxRowNum = Math.ceil(cardCount / maxColNum);
|
|
|
cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
- cardWidth = (bodyBox.width - (inScroll ? 18 : 0)) / maxColNum - (inScroll ? 8 : 11);
|
|
|
+ cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
+ }
|
|
|
+ while(cardWidth > 300 && maxColNum < cardCount) {
|
|
|
+ maxColNum++;
|
|
|
+ maxRowNum = Math.ceil(cardCount / maxColNum);
|
|
|
+ cardHeight = bodyBox.height / maxRowNum - 8;
|
|
|
+ cardHeight = cardHeight < 100 ? 100 : cardHeight;
|
|
|
+ inScroll = maxRowNum * (8 + cardHeight) > bodyBox.height;
|
|
|
+ cardWidth = (bodyBox.width - (inScroll ? 12 : 2)) / maxColNum - 8;
|
|
|
}
|
|
|
body.style.overflow = inScroll ? 'auto' : 'visible';
|
|
|
|
|
|
@@ -56,7 +64,7 @@ class IndicatorView extends React.Component {
|
|
|
cards[i].style.width = cardWidth + 'px';
|
|
|
cards[i].style.height = cardHeight + 'px';
|
|
|
let cells = cards[i].getElementsByClassName('cell');
|
|
|
- let w = cardWidth - 8 * 2;
|
|
|
+ let w = cardWidth - 9 * 2;
|
|
|
fun(cells, w);
|
|
|
}
|
|
|
}
|