在 jquery 中创建类似书籍的布局答案

【问题标题】：Creating book like layout in jquery在 jquery 中创建类似书籍的布局
【发布时间】：2017-12-20 07:01:40
【问题描述】：

我正在开发一个网络应用程序，该应用程序要求其数据以类似书的格式显示。数据是这样的

Menu{
  String menuName;
  List<String> subMenu;
}

我已经使用jquery以书籍格式显示数据。div是动态生成的。
后续步骤：

1. created a single array with menuName and its subMenus.like completeData = [menuObj1,"submenu1","subMenu2",menuObj2,"subMenu1","subMenu2","subMenu3",...];  
2. First fill left Container  
      For Each value in completeData
      if it is obj then create a new Div menuDiv and display its menuName and append to container.
check container height if it exceeds then break.

      if it is String then create a new subMenuSpan and append it to subMenuDiv and finally append it to container.
check container height if it exceeds then break and store the index.

3. Now fill the right container
      start from the storedIndex from Left Container and continue the same process.

代码：用于左容器

for(var i=index;i<completeData.length;i++){

    if(typeof completeData[i] == 'string'){
        // subMenu
        menuSpan = $('<div id="menuSpan">').text(completeData[i]);
        if(typeof completeData[i-1] == 'string'){
            menuSpan.appendTo(menuDiv);

            // Break if container height exceeds and store the index.
            if($('#menu-inner-left').height() >= height){
                menuSpan.remove();
                rightIndex=i;
                break;
            }
        }else{
            menuDiv = $('<div id="menuDiv">').appendTo('#menu-inner-left');
            menuSpan.appendTo(menuDiv);

            // Break if container height exceeds and store the index.
            if($('#menu-inner-left').height() >= height){
                 menuDiv.remove();
                 rightIndex=i;
                 break;
            }
        }
    }else{
        // Menu Name
        menuNameDiv = $('<div id="menuNameDiv">').appendTo('#menu-inner-left');
        $('<div>').text(completeData[i].menuName).appendTo(menuNameDiv).css('float','left');

        // Break if container height exceeds and store the index.
        if($('#menu-inner-left').height() >= height){
              menuDiv.remove();
              rightIndex=i;
              break;
        }
     }
  }

代码：对于正确的容器从存储在左容器中的索引开始，然后进行相同的过程

for(var i=rightIndex;i<completeData.length;i++){
    // Same Code of Left Container
}

结果的最终图像

现在图书视图已正确显示但问题是： 1. 需要大量时间来显示，因为它会创建大量 div。

我尝试用纯 Javascript 创建 div，但仍然没有效果。现在我们正在转向angular JS以避免使用jquery创建div。它会影响加载时间吗？

还有什么其他方法可以避免创建大量 div 并减少加载时间。

【问题讨论】：

Turn.js

标签： javascript jquery angularjs layout

【解决方案1】：

这不是解决方案，只是根据您的碎石捕获实现的一种方法。不要一次加载所有数据，而是尝试在从源获取数据后将该数据存储在缓存中，在每个下一页/上一页单击上编写一个回调，该回调将仅获取当前页面数据，以便您可以减少渲染时间。或者您可以为这种类型使用一些插件，例如 @adeno 指定
转.js。

Menu{
  data:[ 
       String menuName;
       List<String> subMenu;
      ]
  pagingObject:{
   pageNumber<int>,
   currentPage<int>,
   pageSize<int>

  }
}

【讨论】：