java web 瀑布流实现产品概况浏览，可分页加载

最新推荐文章于 2024-08-06 09:25:43 发布

月夜听荷

最新推荐文章于 2024-08-06 09:25:43 发布

阅读量1.7k

点赞数

分类专栏： java web 文章标签：分页瀑布流 bootstrap flickity imagesLoad

本文链接：https://blog.csdn.net/LZLN01/article/details/77933638

版权

本文介绍了如何使用Java Web技术实现瀑布流布局的产品展示，结合分页加载功能。在不同设备上，如大屏、中屏和手机端，展示了不同的显示效果。在index.jsp页面中，通过gridview.js进行数据加载和样式引入，利用imagesLoad和flickity插件实现瀑布流效果。详情页cbinfo.jsp则包含数据加载和样式、js文件的引入。

摘要由CSDN通过智能技术生成

1、效果图

大屏显示效果
PC端显示
详情页
大屏详情页
中屏显示效果

详情页
中屏详情页面
手机端显示效果

手机详情页

2、页面布局代码

a.首页概况浏览 index.jsp

<body data-spy="scroll" data-target=".bs-docs-sidebar">
    <div id="masonry"></div>
</body>

数据加载

<script type="text/javascript">
$(function(){
    
    var offset = 0;
    function reshcb(offsetv){
    
        offsetv = offsetv * 10;
        $('#masonry').gridView({ url: '<%=path%>/qrycb.do', param: { name:'',limit:10,offset:offsetv} });
        offset = offset +1;
    }
    //初始化
    reshcb(offset);
    $(window).scroll(function() {
    
        //滚动到底部加载
        if(!isLoad && $(document).height() - $(window).height() - $(document).scrollTop() < 100) {
            reshcb(offset);
        }

    });

});
</script>

引入样式等文件

<jsp:include page="inc.jsp"></jsp:include>
<link rel="stylesheet" href="bootstrap-3.3.7/css/flickity.min.css" type="text/css"></link>
<link rel="stylesheet" href="bootstrap-3.3.7/css/index.css" type="text/css"></link>
<script type="text/javascript" src="bootstrap-3.3.7/js/flickity.pkgd.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/imagesloaded.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7/js/gridview.js"></script>

gridview.js是自己封装的，其他的都是用各官网的插件
gridview.js代码片段如下：

$.fn.gridView = function(options) {
   
        options = $.extend({}, $.fn.gridView.defaults, options || {});
        var offset = options.param.offset;
        var target = $(this);
        if(offset==0){
            target.addClass('container-fluid');
        }
        if (options.data) {
            init(target, options.d